¿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

Respuestas:

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;
}

fuente
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