前言
在前端开发中，我们经常需要实现一些复杂的布局效果。其中，横向滚动布局就是一个比较常见的难点，尤其是当内容长度不确定时，如何保证横向滚动显示成为一个难题。而 white-space: nowrap 正好可以解决这个问题。
white-space属性详解
定义
white-space 属性用于设置如何处理元素内部的空白符（空格、换行等），取值如下：
normal：默认值，合并连续的空白符，换行符作为分隔符分隔内容。nowrap：不换行，忽略换行符，将所有文本置于同一行。pre：按照源文件中的格式进行排版，包括空格和换行，并保留连续的空白符。pre-wrap：按照源文件中的格式进行排版，包括空格和换行，但是会自动换行。pre-line：忽略源文件中的换行符，合并连续的空白符，自动换行。break-spaces：合并连续的空格符，换行符作为分隔符分隔内容。
应用
横向滚动布局的实现，离不开 white-space: nowrap 属性。
比如我们有这样一段 HTML 代码：
<div class="wrapper">
<div class="content">
<span>hello</span>
<span>world</span>
<span>!</span>
</div>
</div>默认情况下，三个 span 标签会排列在同一行上，但是如果内容太长，超出容器宽度的话，就会换行显示，这时候我们可以给 content 元素加上 white-space: nowrap 属性：
-- -------------------- ---- ------- -------- - ------ ------ ------- --- ----- ----- ----------- ------- -- ---- -- - -------- - ------------ ------- -
这样设置之后，无论内容多长，都会在同一行上显示，并且 wrapper 元素会出现横向滚动条，让用户可以通过滚动来查看全部内容。
示例代码
HTML 代码：
<div class="wrapper">
<div class="content">
<span>hello</span>
<span>world</span>
<span>!</span>
</div>
</div>CSS 代码：
-- -------------------- ---- ------- -------- - ------ ------ ------- --- ----- ----- ----------- ------- -- ---- -- - -------- - ------------ ------- -
总结
通过 white-space: nowrap 属性，我们可以实现横向滚动布局，保证内容在同一行显示，并且让用户可以通过滚动来查看全部内容。这个属性在实际开发中非常有用，建议大家掌握并善加应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33405