listbox - XUL 列表框列表项中的换行符

Question

我尝试了几种 CSS 技巧来获得一个 XUL 列表框来显示带有解释的换行符的项目。这会很有用，因为我正在使用 listitem-iconic 类来添加一个图标，该图标会显着增加 listitem 的高度。

此处提出的前一个问题提到在 XUL 中对标签使用空白 CSS 属性，但是下面的代码没有任何效果。目前，任何用换行符分割的行都一起运行。

listitem {
   white-space: pre-wrap;
}

Answer 1

white-space 属性仅对<description>标签有效，因此您应该将项目包装在内部<description>，然后在<listitem>.

Answer 2

您的样式适用于错误的元素。如果您查看listbox.xml绑定或使用DOM Inspector检查您的列表，您会看到listitem-iconic有一堆“匿名”子级。最终结构如下所示：

<listitem class="listitem-iconic">
  <listcell class="listcell-iconic">
    <image class="listcell-icon"/>
    <label class="listcell-label" flex="1" crop="right"/>
  </listcell>
</listitem>

文本进入label元素，所以这是您应该应用样式的元素。所以这个CSS代码应该可以工作：

listitem .listcell-label {
   white-space: pre-wrap;
}