一旦团队将体验提上日程，就意味着考验你基本功的时候到了。在众多体验中，文字的体验非常重要，文字的处理也非常灵活。这里记录常见的文本排版。1.文字换行控制说到文字换行，不得不提几个属性：white-space，word-break，word-wrap。这些属性都作用于自动换行，我们分别来看。1.1white-spacewhite-space属性描述空白字符在元素中的行为方式并控制换行符。此类空白字符包括*space（空格）*enter（回车）*tab（制表符），其属性值如下：*normal：合并空白字符和换行符*nowrap：合并空白字符，文本不换行*pre:空白字符不合并，文本只在有换行符的地方换行*pre-wrap:保留空白序列，但正常进行Newline*pre-line:合并空白序列，但正常换行以处理其他类型的文件并将其转换为可以被你的应用程序消费并添加到依赖图中的有效模块。
下图是不同属性值的效果图：从上图可以看出：正常的连续空格将减少为一个（例如webpack前面的四个空格合为一个），句子超过一行后会自动换行，单个单词超过一行会越界；nowrap也会合并空格，但是整段不会换行；pre也不换行，相比nowrap，它保留了文本中的空格；pre-wrap留空，句子超过一行自动换行，长词不换行；行前留空，句子超过一行自动换行，长字不换行。1.2word-break强调单词如何换行，比如长单词是否换行。word-break有三个值：*normal*break-all*keep-allkeep-all：单词不会被分成新行；:不管是长词还是短词，遇到边界都会强制换行。是一种换行方式，对单词不友好。三种方法的效果如下：1.3word-wrapword也处理了如何拆分和换行单词。从word-break的效果可以看出，要么单词没有拆分keep-all（遇到长单词会超出元素），要么wordAll可能被拆分成break-all（长单词，短单词遇到边界时，单词将被拆分为换行符）。那么是否可以只对长词拆分换行符（换句话说，只有当一个词长于一行时才拆分）？word-wrap是为了补充word-break而创建的。word-wrap只有2个值：normalbreak-word。如上所述，word-wrap：分词效果。2.文字溢出显示省略号。在知道了如何控制文本换行之后，为了保持文本的整洁，我们往往会想要保持文本的整洁。不换行，但同时也不要超出边框，超出边框的文字以省略号显示。单行文字溢出显示有了上面的基础，单行文字溢出显示就很简单了。原理是防止换行+溢出文字溢出，溢出如下：hidden;text-overflow:ellipsis;white-space:nowrap;moreLinetextoverflowdisplaywhite-space:nowrap;将控件的文字只能显示一行，如果要最多显示x行，多余的会显示省略号，怎么办？目前的解决方案是：显示：-webkit-box；-webkit-line-clamp:3;溢出：隐藏；由于使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器和移动端。其中，-webkit-line-clamp用于限制一个块元素显示的文本行数。为了达到这个效果，需要结合显示：-webkit-box；WebKit属性，对象显示为灵活的框模型。如下图：3参考资料https://www.baidu.com/link?ur...https://www.cnblogs.com/dfyg-...https://www.cnblogs.com/gopar。..张新旭《css世界》