CSS-文本换行处理-white-space

本文主要介绍通过设置CSS的white-space属性来处理元素内的空白、空白符，以实现文本的不换行、自动换行、空白保留或合并。

这边先列一下white-space可以设置的值，及其作用：

---

一、normal

作用：默认，空白会被浏览器忽略。

HTML

<div class="normal">
这是一些文本。
这是一些文本。
这是一些文本。
</div>

CSS

.normal {
  white-space:normal
}

运行结果

 

---

二、pre

作用：空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。

HTML

<div class="pre">
这是一些文本。
这是一些文本。
这是一些文本。
</div>

CSS

.pre {
  white-space:pre
}

运行结果：

---

三、nowrap

作用：文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

HTML

<div class="nowrap">
这是一些文本。
这是一些文本。<br/>
这是一些文本。
</div>

CSS

.nowrap {
  white-space:nowrap
}

运行结果：

---

四、pre-wrap

作用：保留空白符序列，但是正常地进行换行。

HTML

1 2 3

<div class="pre-wrap"> 这是一些文本。这是一些文本。<br/>这是一些文本。 </div>

CSS

1 2 3

.pre-wrap { white-space:pre-wrap }

运行结果：

---

HTML

1 2 3

<div class="pre-wrap"> 这是一些文本。这是一些文本。<br/>这是一些文本。 </div>

CSS

1 2 3

.pre-wrap { white-space:pre-wrap }

运行结果：

---

五、pre-line

作用：合并空白符序列，但是保留换行符。

HTML

1 2 3 4

<div class="pre-line"> 这是一些文本。 这是一些文本。 这是一些文本。 </div>

CSS

1 2 3

.pre-line { white-space:pre-wrap }

运行结果：

---

六、inherit

作用：规定应该从父元素继承 white-space 属性的值。

HTML

<div class="inherit">
这是一些文本。          
这是一些文本。
这是一些文本。
</div>

CSS

.inherit {
  white-space:inherit
}

运行结果：

#####