我继承了这个网站,有些 css 很乱。 具体来说,这个新页面
http://www.businesseventssydney.com.au/
有一个蓝色的水平菜单栏。起初,一些菜单项的文本很长,没有在菜单中换行。然而,经过一些工作和额外的 css,我设法让文本换行,例如将鼠标悬停在“Why Sydney”上,然后悬停在“Sydney Growing for the Future”上。
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/
谁能帮我解决这个问题?
最佳答案
与其添加一大堆 CSS,不如删除:
#topnav {
white-space: nowrap;
}
关于css - 在菜单中包装文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12522795/