不需要的垂直 HTML 文本 - 过早的收缩包装效果

Question

我只在 Drupal 网站上遇到过这种情况，因此它可能与 Zen 或 Garland 主题的默认 CSS 有关。但是，对于我的一生，我无法确定为什么它会继续随机发生。

最好的解释方式是在这里查看图片。不管我的word-wrap 和white-space CSS 设置如何，这种情况都会发生，而且只是随机发生的。有时是一个元素，有时是另一个元素（这里发生在菜单中的“我们的品牌”和“提交”之间）。

所附图片是一个内联<ul>，每个<li>内都有链接。

任何见解将不胜感激！

这是屏幕截图中显示的菜单样式示例：

<style type="text/css">

#navbar { float: left; height: 32px; overflow: hidden; margin-left: 0px; margin-right: -100%; padding: 0px; width: 100%; }

#navbar ul { margin: 0px; padding: 0px; text-align: left; }

ul.links li { display: inline; list-style-type: none; padding: 0px 0.5em; }

#navbar li { float: left; padding: 0px 20px 0px 0px; }

#primary a { text-decoration: none !important; white-space: pre !important; }

</style>

Answer 1

查看实际页面源（不使用 firebug）确保文本输入正常。空格的使用：pre；将导致它保留空白。它应该是空格：nowrap;