强制文本换行

Question

这是我网站的主菜单：

正如您所注意到的，主菜单项目中的文字没有包装。我尝试了许多解决方案，但似乎没有任何影响这些项目。这是css代码：

#pt_custommenu .parentMenu a{
    width: 100px; height: 59px;
    line-height: normal;
    padding-top: 0; padding-bottom:0; 
    float:left;
    display: inline-block;
    position: relative;
    text-transform: none;
    word-wrap: normal;
    white-space: normal !important;
}

由于<a>元素具有标准宽度和高度，因此我希望将文本分成两行，就像通常那样。

有什么建议吗？

Answer 1

删除 

此代码插入空格而不包装。普通空间不这样做。

您可以在此处检索有关的更多信息： http://www.sightspecific.com/~mosh/www_faq/nbsp.html

编辑：我将复制相关信息，以防有一天这个链接消失：

  

 是用于表示不间断空间的实体。它是   基本上是标准空间，主要区别在于a   浏览器不应该破坏（或包装）一行文本   这占了。

     

许多WYSIWYG HTML编辑器都会插入这些实体   控制HTML文档的布局。例如，这样的编辑器   可以使用一系列不间断的空格来缩进一个段落   这样：

<p>
    &nbsp; &nbsp; &nbsp; This first line of text is supposed to be indented. However, many browsers will not render it as intended.
</p>

     

[...]

     

有些时候使用“可接受”或“可取”   实体，只要理解后果：

     

用于在单词或元素之间创建空格   不应该被打破。唯一可以解决的问题   这种用法是太多的单词串起来而不是破坏   空格可能需要一些图形浏览器来显示水平   滚动条或使它们显示文本重叠表   边界。

Answer 2

您希望文本被破坏，请使用以下内容：

word-wrap: break-word;

我再次检查，看到你没有使用任何空格，这就是为什么它不能。将 替换为普通空格字符。否则浏览器会将其读作没有空格的块。