Forcing a description widget to wrap in XUL

Question

I am trying to get a description in a XUL application to wrap, even if it contains long lines.

For example, if I save the following as a .xul file and open it in Firefox, it looks fine and wraps appropriately:

<?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>

However, if I remove the spaces in the big line, it doesn't get wrapped and I just get a scroll bar to see the line:

<?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>

Is there any way I can use CSS or anything else to force the long line to be wrapped when it reaches the 200 pixel limit?

Answer 1

Firefox 3.1 supports this: http://www.css3.info/preview/word-wrap/

The word-wrap property was invented by Microsoft and added to CSS3. It allows long words to be able to be broken and wrap onto the next line. It takes in two values; normal or break-word. This is currently supported in IE, Safari, and Firefox 3.1 (Alpha).

With older (and current) versions of Firefox there is no standard way (Google was my friend) of doing it. Some suggest using a small script that adds <br /> in the middle of the word. Use word-wrap:break-word and hope that users will eventually upgrade.

Answer 2

Originally ChatZilla used to scatter empty <img> elements into the output which would serve as points at which long words could wrap, although this was later changed to <wbr> elements.