允许文本在css菜单中换行

Question

我有一个使用无序列表创建菜单的模板。 See here

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

See here

如果菜单太长，我可以强制文本换行吗？

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

Answer 1

使用css的word-wrap属性

自动换行：break-word;

Answer 2

@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;
}

Answer 3

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

长版是..长：

• 在.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和width: 100%。
• 在#header .access上，添加bottom: 0。
• 将border-left从sf-menu a移至sf-menu li。
• 将选择器.sf-menu a.first更改为.sf-menu .first。
• 这部分不是很好，但要在左侧（和右侧）取回20px padding，请在开头添加额外的li：<li class="noHover" style="width: 20px; border-left: 0">&nbsp;</li> ;最后：<li class="noHover" style="width: 20px; border-left: 0">&nbsp;</li>。您可能不需要 。您需要使用#footer。
执行相同的操作

• 要停止“填充”:hover上的li，请添加以下内容：

  .sf-menu li.noHover:hover {
      background: none !important
  }
  

• 在#footer上，添加padding-top: 48px。

这就是一切（除非我搞砸了），除了以支持IE6 / 7。如果你想要的话，你将不得不在应用我的修复程序的情况下添加新版本（如果你愿意，可以在一个临时的新文件夹中）。当我必须首先应用所有这些更改来正确测试它时，尝试修复IE6 / 7是太多的工作。