我尝试了几种 CSS 技巧来获得一个 XUL 列表框来显示带有解释的换行符的项目。这会很有用,因为我正在使用 listitem-iconic 类来添加一个图标,该图标会显着增加 listitem 的高度。
此处提出的前一个问题提到在 XUL 中对标签使用空白 CSS 属性,但是下面的代码没有任何效果。目前,任何用换行符分割的行都一起运行。
listitem {
white-space: pre-wrap;
}
white-space 属性仅对<description>
标签有效,因此您应该将项目包装在内部<description>
,然后在<listitem>
.
您的样式适用于错误的元素。如果您查看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;
}