css - paginas - ¿Hay alguna manera de incluir palabras largas en un div?
etiquetas html (6)
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.
Preferentemente CSS pero los fragmentos de JavaScript funcionarían bien también.
editar: Sí, refiriéndose a las cuerdas largas, ¡salud!
Al leer el comentario original, rutherford está buscando una forma de navegador cruzado para envolver el texto ininterrumpido (inferido por su uso de word-wrap para IE, diseñado para romper cadenas ininterrumpidas).
/* 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)
Como David menciona, los DIV envuelven palabras 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 la fuente 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.
La mayoría de las respuestas anteriores no me funcionaron 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:
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
Puedes 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.
white-space: pre-wrap