文字换行和空格控制

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

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世界》