¿Cómo puedo ajustar o dividir texto / palabra largos en un intervalo de ancho fijo?

104

Quiero crear un intervalo con un ancho fijo que cuando escribo cualquier cosa en el intervalo <span>lgasdfjksdajgdsglkgsadfasdfadfasdfadsfasdfasddkgjk</span>, como una cadena larga de texto sin espacios, la palabra (s) se rompa o se ajuste a la siguiente línea.

¿Algunas ideas?

html css

— محمد کثیری
fuente

192

Puede usar la propiedad CSS word-wrap:break-word;, que dividirá las palabras si son demasiado largas para el ancho de su tramo.

span { 
    display:block;
    width:150px;
    word-wrap:break-word;
}

<span>VeryLongLongLongLongLongLongLongLongLongLongLongLongExample</span>

Expandir fragmento

— Maxime Lorant
fuente

1

Funciona bien para el control de etiquetas asp.net. ¡Gracias!

— etlds

41

Agregar white-space: normalayuda a anular el estilo externo que puede interferir :) .. inline-blockfunciona tan bien comoblock

— Katia

¿Qué hay de romper dos tramos que están dentro de un elemento de bloque?

— Daniel Springer

Para aquellos que aún tienen problemas después de usar esta respuesta, asegúrese de especificar un 'ancho'; de lo contrario, es posible que no funcione

— Staccato

Debe tener un ancho para saber dónde romper

— DFSFOT

40

Intente seguir css con la adición de white-space:

span {
    display: block;
    word-wrap:break-word;
    width: 50px;
    white-space: normal
}

— Gerard de Visser
fuente

5

¡Gracias! ¡No podía entender por qué mi texto nunca terminaba! el espacio en blanco fue la razón.

— mdiehl13

1

Mi problema también se solucionó una vez que puse:white-space: normal

— majorBummer

Aquí hay una tabla de referencia en caso de que necesite espacios en blanco y envoltura: css-tricks.com/almanac/properties/w/whitespace

— Hritik

16

Me gusta esto

MANIFESTACIÓN

  li span{
    display:block;
    width:50px;
    word-break:break-all;
}

— Falguni Panchal
fuente

mi amigo quiero cuando pongo ancho de tramo: 50px; ¡los valores en mi intervalo solo se muestran en 50px y otros valores pasan a la siguiente línea y se muestran en 50px!

— محمد کثیری

1

@ mamal10 Consulta la solución de Maxime Lorant.

— Mr_Green

3

De forma predeterminada, a spanes un inlineelemento ... así que ese no es el comportamiento predeterminado.

Puede hacer que el spancomportamiento se comporte de esa manera agregando display: block;a su CSS.

span {
    display: block;
    width: 100px;
}

1

Prueba esto

span {
    display: block;
    width: 150px;
}

— Eswara Reddy
fuente

0

Solo para ampliar el alcance práctico de la pregunta y como un apéndice a las respuestas dadas: a veces uno puede encontrar necesario especificar los selectores un poco más.

Al definir el intervalo completo como display: inline-block, es posible que tenga dificultades para mostrar imágenes.

Por lo tanto, prefiero definir un lapso así:

span {
  display:block;
  width:150px;
  word-wrap:break-word;      
}
p span, a span,
h1 span, h2 span, h3 span, h4 span, h5 span {
  display:inline-block;
}
img{
  display:block;
}

— Leopoldo
fuente

0

En mi caso, display: block estaba rompiendo el diseño según lo previsto.

La max-widthpropiedad me acaba de salvar.

y para peinar, también puedes usar text-overflow: ellipsis.

mi código era

max-width: 255px
overflow:hidden

— sh6210
fuente