一旦团队把体验提上日程，那意味着考验你基本功的时候到了。在诸多体验中，文本的体验非常重要，文本的处理也非常灵活多变，在此记录下文本常用布局。

1. 文本换行控制

提到文本的换行，不得不提几个属性: white-space、word-break、word-wrap。这几个属性都对单词换行起作用，我们分别来看。

1.1 white-space

white-space 属性描述空白字符在元素中如何表现以及控制换行，这类空白字符包括

* space（空格）* enter(回车)
* tab(制表符)

他有以下几个属性值:

* normal: 合并空白字符和换行符
* nowrap：合并空白字符，文字不换行
* pre: 空白字符不合并，文字只在有换行符的地方换行
* pre-wrap: 保留空白符序列，但是正常地进行换行
* pre-line：合并空白符序列，但是正常地进行换行

我们用下面这段文字说明不同属性值的表现效果：

<p>Out of the box,    webpack only understands JavaScript and JSON files. pneumonoultramicroscopicsilicovolcanoconiosis Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.</p>

下图是不同属性值的效果图:

从上图中可以看到:
normal 时 连续的空格会被缩减成一个（比如 webpack 前的四个空格标合并成了一个），句子超过一行后会自动换行，而长度超过一行的单个单词会超出边界；
nowrap 也会合并空白符，但是整个段落不换行；
pre 也是不换行，和 nowrap 相比，保留了文字中的空白；
pre-wrap 保留空白，句子超过一行自动换行，长单词不换行；
pre-line 空格空白，句子超过一行自动换行，长单词不换行。

1.2 word-break

强调单词会怎样拆分换行，比如长单词会不会换行
word-break 有三个值:

* normal
* break-all
* keep-all

keep-all: 单词不会被拆开换行；
break-all: 不管长单词还是短单词，碰到边界，一律强制换行。是对单词不友好的一中换行方式。三者方式效果如下图:

1.3 word-wrap

word 也是处理 单词如何拆分换行, 从 word-break 效果可以看到，要么是 单词不拆分 keep-all(遇到长单词会超出元素)，要么是 单词都可能被拆分 break-all(长单词、短单词遇到边界都会被拆分换行)。那么能不能 只有长单词才拆分换行呢(换句话说就是只有 一个单词长度超过一行的时候才会拆分)？word-wrap 就是为了补充 word-break 而产生的。
word-wrap 只有 2 个值:

• normal
• break-word.

如上介绍，word-wrap: break-word 效果.

2. 文本溢出显示省略号

知道文字如何控制换行之后，为了保持文字整齐性，我们经常想大段文字超过一行不要换行，但同时也不要超过边界，超过的文字使用省略号显示。

单行文本溢出显示

有了上面的基础，单行溢出显示就非常简单了，原理就是不让换行 + 超出的文本 overflow, 也就是下面这样

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本溢出显示

white-space: nowrap; 会控制文字只能显示一行，如果想要最多显示 x 行，多出的则显示省略号，怎么办呢？目前的解决办法是:

display: -webkit-box;
-webkit-line-clamp: 3;
overflow: hidden;

因使用了 WebKit 的 CSS 扩展属性，该方法适用于 WebKit 浏览器及移动端.
其中，
-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合 display: -webkit-box; WebKit 属性，对象作为弹性伸缩盒子模型显示。
如下图:

3 参考资料

https://www.baidu.com/link?ur…

https://www.cnblogs.com/dfyg-…

https://www.cnblogs.com/gopar…
张鑫旭《css 世界》