¿Hay alguna manera de envolver palabras largas en un div?

173

Sé que Internet Explorer tiene un estilo de ajuste de texto, pero me gustaría saber si existe un método de navegador cruzado para hacerlo en un div.

Preferiblemente, los fragmentos CSS pero JavaScript también funcionarían bien.

editar: Sí, refiriéndose a cadenas largas, ¡salud amigos!

css html word-wrap rutherford
fuente
77
El ajuste de palabras ocurre por defecto. ¿Te refieres a envolver cuando no hay palabras separadas?
Quentin

Respuestas:

313

Al leer el comentario original, rutherford está buscando una forma de navegador cruzado para ajustar el texto sin romper (inferido por su uso del ajuste de palabras para IE, diseñado para romper cadenas sin romper).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

He usado esta clase por un momento y funciona de maravilla. (nota: solo he probado en Firefox e IE)

Aaron Bennett
fuente
Publicación anterior, pero no parece representar espacios cuando IE está en modo peculiar.
Jeremy
2
Estoy usando Firefox 24.6.0, y esto word-wrap: break-wordes lo que realmente funcionó.
user545424
3
Word-wrap: break-wordaunque creado por Microsoft ahora es parte del estándar CSS 3 y es lo que hace el truco :-)
Pascal_dher
38

La mayor parte de la respuesta anterior no me funcionó en Firefox 38.0.5. Esto hizo ...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

Documentación:

Paul Zahra
fuente
2
¡Gracias! esta es la única respuesta que funcionó (salto de palabra: descanso; es lo que me funcionó)
DaniCE
12

La solución de Aaron Bennet está funcionando perfectamente para mí, pero tuve que eliminar esta línea de su código -> white-space: -pre-wrap;porque estaba dando un error, por lo que el código de trabajo final es el siguiente:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

muchas gracias

Hugo
fuente
1
Aaron Bennett mencionó esta misma respuesta 2 años antes que usted. lo que hiciste aquí no agrega valor.
AaA
66
Hola, como puedes ver si vuelves a leer ambas respuestas, lo que digo es que la solución de Aaron está bien, pero recibí un error en una de las líneas que escribió, así que lo cambié a la solución que funcionó para yo. Tal vez debería haber comentado en su respuesta, lo sé, lo siento y gracias
Hugo
Tuve que agregar este "espacio en blanco: -pre-wrap" y funcionó :)
Ravi Khambhati
0

Como David menciona, los DIV hacen Ajustar línea por defecto.

Si se refiere a cadenas de texto realmente largas sin espacios, lo que hago es procesar la cadena del lado del servidor e insertar espacios vacíos:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

No es exacto ya que hay problemas con el tamaño de fuente y demás. La opción span funciona si el contenedor es de tamaño variable. Si se trata de un contenedor de ancho fijo, puede seguir adelante e insertar saltos de línea.

DA.
fuente
@TomHert eso es realmente extraño. Aunque, bueno, IE. Nunca funciona Dicho esto, esto fue publicado hace 5 años. CSS3 ahora tiene algunas mejores opciones de ajuste de texto que IE puede acomodar developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
DA.
Sí, lo sé, me sorprendió la simplicidad de esta solución y tuve que probarla :)
Tom Hert
0

Puede intentar especificar un ancho para el div, ya sea en píxeles, porcentajes o ems, y en ese punto el div seguirá siendo ese ancho y el texto se ajustará automáticamente dentro del div.

Slevin
fuente
Intente configurar un ancho de 10 píxeles ... y luego use una palabra más larga que 10 píxeles
Paul Zahra