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

Question

我已经尝试了几个CSS技巧来获取XUL列表框来显示解释换行符的项目。这将是有用的，因为我使用listitem-iconic类添加一个图标，显着增加listitem高度。

previous question asked here提到在XUL中使用标签的空格CSS属性，但下面的代码没有任何效果。目前，任何使用换行符分割的行都会一起运行。

listitem {
   white-space: pre-wrap;
}

Answer 1

此空白属性仅对<description>标记有效，因此您应将项目包装在<description>内，然后再包含在<listitem>中。

Answer 2

你的风格适用于错误的元素。如果您查看listbox.xml binding或使用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;
}