css - 在 Kentco 9 的 CSS 列表菜单中使用的页面名称中插入换行符

Question

我使用“CSS 列表菜单”Web 部件在 Kentico 9 中创建了一个菜单。我已经使用 CSS 设计了它的样式，在我添加新的页面菜单项之前一切都很好。现在，这些元素不再适合导航中的一行。因为文档名称的长度不均匀，理想情况下我想简单地在较长标题的符号周围添加一个换行符。 (我还没有找到使用 CSS 根据特定字符插入换行符的方法)

在每个 <li> 之间平均分配宽度元素通过百分比将第一个标题插入三行，在菜单项之间留下很大的间隙并且看起来没有吸引力。需要记住的是悬停功能，它显示每个父页面下面的第一级子页面。

当前菜单外观:

我没有对 Web 部件进行任何重大更改，并且选中了“自动换行”。这是 CSS 代码:

/* Horizontal menu - main menu */

header nav {
  text-align: center;
  width: 100%; /* Container width is 960px */
  background-color: rgb(1, 69, 106);  
  box-sizing: border-box;
}

header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  left: 0;
}

header nav ul li {
  display: inline-block;
  position: relative;
  padding:0;
  font-size: 1.15em;
}

header nav ul li a {
  text-decoration: none;
  border: 10px solid rgb(1, 69, 106);
  display: block;
}

header nav ul li a:visited {
  color: rgb(234, 161, 23);
}

header nav ul li a:hover,
header nav ul li a:active,
header nav ul li a:focus {
  text-decoration: none;
  color: rgb(255, 255, 255); 
  background-color: rgb(8, 96, 143);
  border: 10px solid rgb(8, 96, 143);
}

header nav ul ul {
  display: none;
}

header nav ul li:hover ul {
  display: block;
  background-color: rgb(1, 69, 106);
  position: absolute;
  width: 100%;
}

header nav ul li ul li {
  font-size: 1em;
  width: 100%;
  z-index: 1;
  background-color: rgb(1, 69, 106);
}

header nav ul li ul li a {
  border: 5px solid rgb(1, 69, 106);
  display: block;
}

header nav ul li ul li a:hover,
header nav ul li ul li a:active,
header nav ul li ul li a:focus {
  border: 5px solid rgb(8, 96, 143);
}

header nav ul ul ul li {
  display: none;
}

Answer 1

您可以在页面属性 -> 导航下为每个页面添加一个类或样式 - 这意味着每个页面在顶部导航中可以有不同的类。有了这个，您可以明确指定每个菜单项的宽度并添加自动换行:

.myNavItem1 {
  white-space: normal;
  width: 80px;
}

另一种方法是使用下拉菜单 - 它呈现为表格，因此它永远不会将元素移动到下一行，但我个人不喜欢表格，因为它们没有提供足够的灵 active 。