强制文本换行

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

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

 是用于表示不间断空间的实体.它本质上是一个标准空间,主要区别在于浏览器不应该在占用的点处中断(或换行)一行文本.

许多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;

我又检查了一下，发现你没有使用任何空格，这就是为什么它不能。替换 为普通空格字符。否则浏览器会将其读取为不带空格的块。