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?

¿Fue útil?

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.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top