允许文本在 css 菜单中换行

Question

我有一个使用无序列表来创建菜单的模板。 参见此处

当我使用 Google 翻译翻译网站时，如果翻译太长，菜单就会中断，导致浮动列表项下拉。将其翻译成法语似乎会导致问题。

参见此处

如果文本太重，有没有办法可以强制文本换行渴望菜单吗？

我不介意是否必须将无序列表更改为其他内容，但我不想使用表格。

Answer 1

使用 css

word-wrap 的 word-wrap 属性：break-word;

Answer 2

简短版本：我们将使用 display: table-cell。

长版本是.. long：

• 在 .access 上，删除 padding 规则。
• 在 .sf-menu 上，删除 float: left 并添加 display: table。
• 在 .sf-menu li 上，删除 float: left 并添加 display: table-cell 和 vertical-align: middle代码>.
• 在 #header 和 #footer 上，添加 position:relative。
• 在 .access 上，删除 height: 32px 和 margin-top: -32px 并添加 position:absolute 和 <代码>宽度：100%。
• 在#header .access 上，添加bottom: 0。
• 将 border-left 从 sf-menu a 移至 sf-menu li。
• 将选择器 .sf-menu a.first 更改为 .sf-menu .first。
• 这部分不太好，但要恢复左侧（和右侧）的 20px padding，请在开头添加一个额外的 li :
•  

;最后：

•  

。您可能不需要  。您需要对 #footer 执行相同的操作。

• 要停止“padding”li 上的 :hover，请添加如下内容：

  .sf-menu li.noHover:hover {
      背景：无！重要
  }
  

• On #footer< /code>，添加 padding-top: 48px。

这就是一切（除非我在某个地方搞砸了），除了 IE6/7 支持。如果您想要这样，您将必须应用我的修复程序来发布新版本（如果您愿意，可以在临时新文件夹中）。当我必须先应用所有这些更改才能正确测试它时，尝试修复 IE6/7 的工作量太大了。

Answer 3

@Pranay 指向正确的方向，但您需要将宽度设置为 li 而不是 ul！例如：

ul.sf-menu li {
   width: 80px; /* make this the maximum width possible! */
   word-wrap: break-word;
}

并且在菜单ul之后插入一个清除div：

<div class="clear"></div>

其中clear类定义为：

.clear {
   clear: both;
   width: 0;
   height: 0;
}