防止 CSS 布局中的换行

Posted 2023-02-22

【中文标题】防止 CSS 布局中的换行

【英文标题】：Preventing line wrapping in CSS layouts

【发布时间】：2011-03-25 11:52:34

【问题描述】：

我的 CSS 设计师做了一个设计，其中有两个 ul 兄弟姐妹从左到右排列。布局是通过指定ul 标签的宽度来完成的。

他在 Windows 上使用 Firefox，一切看起来都很好。我在 OS X 上使用 Firefox，其中一个 li 标签的内容有太多文本，所以它会流到另一行。设计的目的是使文本在一行上。

有几个考虑因素：

我希望ul 标签从左到右，而不是从上到下 我希望解决方案对 i18n 友好（翻译字符串不应导致它们分成两行）

如果这是以像素为单位定义的，为什么即使在同一个浏览器中，它在 OS X 中的显示与在 Windows 中也不同？

是否有通用的 CSS 解决方案可以防止换行或防止页面在 OS X 和 Windows 之间的换行方面看起来不同？或者这是一个失败的原因？

【问题讨论】：

在我看来，设计师需要做一些工作来提供跨浏览器设计。

我建议将<li> 元素向左浮动，并可能发布一些代码或设计链接，以便我们可以看到您在处理什么？

【参考方案1】：

在uls 上设置white-space: nowrap 将永远阻止文本换行，直到找到<br />。据我了解，列表已经是水平的，但为了完整起见，您可以通过将li 元素设置为display: inline 或display: inline-block 来实现。 white-space: nowrap 不适用于 floated 列表项。

参考资料：

the white-space CSS property cross-browser display: inline-block

【讨论】：

Setting white-space: nowrap on the uls will prevent the text from wrapping, ever 这是信息的瑰宝。

【参考方案2】：

有可能，为这些元素设置 width: auto; 也可以修复它。