css - 强制描述小部件包装

Question

我正在尝试在 XUL 应用程序中获取要换行的描述，即使它包含长行也是如此。

例如，如果我将以下内容保存为 .xul 文件并在 Firefox 中打开它，它看起来很好并且适本地换行:

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

但是，如果我删除大行中的空格，它不会被换行，我只会得到一个滚动条来查看该行:

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

有什么方法可以使用 CSS 或其他任何方法在达到 200 像素限制时强制换行？

Answer 1

Firefox 3.1 支持这个: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).

对于较旧(和当前)版本的 Firefox，没有标准的方法(Google 是我的 friend )。一些人建议使用添加 <br /> 的小脚本在这个词的中间。使用word-wrap:break-word，希望用户最终会升级。