强制描述小部件换行答案

【问题标题】：Forcing a description widget to wrap强制描述小部件换行
【发布时间】：2017-04-25 21:30:25
【问题描述】：

我正在尝试在 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>

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

【问题讨论】：

标签： css firefox xul

【解决方案1】：

Firefox 3.1 支持这个：http://www.css3.info/preview/word-wrap/

自动换行属性由 Microsoft 发明并添加到 CSS3 中。它允许长单词能够被打破并换行到下一行。它有两个值；正常或断词。这目前在 IE、Safari 和 Firefox 3.1 (Alpha) 中受支持。

对于旧（和当前）版本的 Firefox，没有标准的方法（Google 是我的朋友）。有人建议使用在单词中间添加<br /> 的小脚本。使用 word-wrap:break-word 并希望用户最终升级。

【讨论】：

【解决方案2】：

最初 ChatZilla 用于将空的元素分散到输出中，这些元素将作为长词可以换行的点，尽管后来改为元素。

【讨论】：