Sé que Internet Explorer tiene un estilo de ajuste de palabras, pero me gustaría saber si hay un método de navegación cruzada para hacerlo al texto en un div.¿Hay alguna manera de agrupar palabras largas en un div?
Preferentemente CSS pero los fragmentos de JavaScript funcionarían bien también.
editar: Sí, refiriéndose a las cuerdas largas, aplausos, amigos!
Leyendo el comentario original, Rutherford está buscando un cross-browser forma de envolver ininterrumpida texto (inferida por su uso de la palabra-wrap para IE, diseñado para romper ininterrumpida instrumentos de cuerda).
/* 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 tiempo, y funciona como un encanto. (nota: solo he probado en FireFox e IE)
Publicación antigua, pero no parece generar espacios cuando IE está en modo peculiar. – Jeremy
no funciona ..... –
Estoy usando Firefox 24.6.0, y el 'word-wrap: break-word' es lo que realmente funcionó. – user545424
Como david menciona, DIVs do ajusta palabras por defecto.
Si se refiere a muy largas cadenas de texto sin espacios, lo que hago es un proceso del lado del servidor cadena e inserte tramos vacíos:
thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace
¡No es exacto, ya que hay problemas con la fuente de dimensionamiento y tal. La opción de tramo funciona si el contenedor es de tamaño variable. Si se trata de un contenedor de ancho fijo, puede continuar e insertar saltos de línea.
no funciona en IE9 y superior ... –
@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 palabras que IE puede acomodar https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap –
Sí, lo que estoy sorprendido es la simplicidad de esto solución que tuve que probar :) –
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.
Intenta configurar 10px ancho ... y luego usa una palabra más larga que 10px –
white-space: pre-wrap
vínculo muerto.Por favor, brinde una respuesta más completa. – JoshYates1980
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 final el código de trabajo es la 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
Aaron Bennett mencionó esta misma respuesta 2 años antes que usted. Lo que hiciste aquí no agrega valor. – AaA
Hola, como puedes ver si vuelves a leer ambas respuestas, lo que estoy diciendo es que la solución de Aaron está bien, pero estaba obteniendo un error en una de las líneas que escribió, así que simplemente lo cambié a la solución que funcionaba para mi. 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ó :) –
la mayor parte de la respuesta anterior no funcionó para mí 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:
ajuste de palabras ocurre por defecto. ¿Te refieres a envolver cuando * no hay * palabras separadas? – Quentin