css - 在菜单中包装文本

时间:2012-09-21 00:30:50

标签: css

我继承了这个网站,有些css很乱。 具体来说,这个新页面

http://www.businesseventssydney.com.au/

有一个蓝色的水平菜单栏。起初,一些菜单项的文本很长,并没有包装在菜单中。然而,经过一些工作和额外的CSS,我设法得到文本包装,例如徘徊在“为什么悉尼”然后“悉尼为未来而成长”。

css如下:

.second-level{
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    /*word-wrap: break-word;*/       /* Internet Explorer 5.5+ */
    /*word-break: break-all;*/
    white-space: normal;
    -ms-word-break: break-all;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
    hyphens: auto;
}

菜单文字在FF和Chrome中包装很好,即单词不会分开,整个单词会换行到下一行。但是,在IE中,单词在换行之前会被拆分。

奇怪的是,在另一个页面上有相同版本的菜单,它在所有浏览器中都能很好地运行,并且不需要对它做任何事情。请参见以下页面:

http://www.businesseventssydney.com.au/about-us/

任何人都可以帮我解决这个问题吗?

1 个答案:

答案 0 :(得分:0)

您可以直接删除:

,而不是添加一大堆CSS
#topnav {
white-space: nowrap;
}