Forzar un widget de descripción para envolver
Pregunta
Estoy tratando de obtener una descripción en una aplicación XUL para envolver, incluso si contiene líneas largas.
Por ejemplo, si guardo lo siguiente como un archivo .xul y lo abro en Firefox, se ve bien y se ajusta adecuadamente:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
id="theWindow"
title="The Window"
style="overflow: auto;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
>
<vbox flex="1" style="max-width: 200px; overflow:auto; border: 1px dotted black; padding: 2px;">
<description style="border: 1px solid black; padding: 2px;">test</description>
<description style="border: 1px solid black; padding: 2px;">test test test test test test test test test test test test test test test test test test test test test</description>
</vbox>
</window>
Sin embargo, si elimino los espacios en la línea grande, no se ajusta y solo aparece una barra de desplazamiento para ver la línea:
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
id="theWindow"
title="The Window"
style="overflow: auto;"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
>
<vbox flex="1" style="max-width: 200px; overflow:auto; border: 1px dotted black; padding: 2px;">
<description style="border: 1px solid black; padding: 2px;">test</description>
<description style="border: 1px solid black; padding: 2px;">testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</description>
</vbox>
</window>
¿Hay alguna forma de usar CSS o cualquier otra cosa para forzar que la línea larga se ajuste cuando alcanza el límite de 200 píxeles?
Solución
Firefox 3.1 admite esto: http://www.css3.info/preview/word -wrap /
La propiedad de ajuste de texto fue inventada por Microsoft y agregada a CSS3. Permite que las palabras largas puedan separarse y pasar a la siguiente línea. Toma dos valores; normal o palabra de interrupción. Actualmente es compatible con IE, Safari y Firefox 3.1 (Alpha).
Con versiones anteriores (y actuales) de Firefox no hay una forma estándar (Google era mi amigo) de hacerlo. Algunos sugieren usar un pequeño script que agrega <br />
en el medio de la palabra. Use word-wrap: break-word y espere que los usuarios eventualmente se actualicen.
Otros consejos
Originalmente, ChatZilla solía esparcir < img > elementos en la salida que servirían como puntos en los que las palabras largas podrían ajustarse, aunque luego se cambió a < wbr > elementos.