如何防止Primefaces在子菜单文本和三角形图标之间换行？

Question

当子菜单标签太长时，Primefaces会在下一行放置右指三角形：

如何使Primefaces将三角形放在同一条线上，就像使用短子菜单项一样？

我看到了Primefaces menubar menuitem Width但是当我添加这些CSS规则时，行为没有改变。

特别是，更改同时包含链接文字和三角形图标的a.ui-menuitem-link CSS并没有帮助：

a.ui-menuitem-link {
    white-space: nowrap;
    width: auto !important;
}

这可能是一些简单的CSS事情，但我只是没有看到它。

Answer 1

menuitem样式仅影响菜单中的项目，并且不会对打开的整个菜单起作用。

如果您使用的是p：menuButton，则可以使用 menuStyleClass 属性：

• 名称：menuStyleClass
• 默认：null
• 输入：字符串
• 说明：叠加菜单元素的样式类。

一个简单的例子：

在你的css文件中：

.superWide
{
    width:      300px;
    min-width:  300px;
    max-width:  300px;
}

菜单按钮：

<p:menuButton value="menu" menuStyleClass="superWide">
    ...

结果可能会因其他主要菜单类型而异。

Answer 2

我的修复浪费从CSS规则中移除!important;这样，其他规则可以覆盖它，在这种情况下是常规的Primefaces样式。