光阴小栈

实现页面的文字、字母的展示效果的时候，相信大家都会遇到过一些这样的要求：“文字不能换行，要强制文字一行展示”或者是“字母不会自动换行，需要实现可以自动换行断句”等等诸如此类的要求，现在就这个文字、字母换不换行的问题，说说这三个css属性的巧妙运用：`white-space`、`word-wrap`、`word-break`

首先，先来看下这三个属性在W3C上给出的释义：（具体这三个属性各自有哪些属性值需要大家查找下W3c这里就不再赘述了）

1、 white-space：属性设置如何处理元素的空白；
2、 word-wrap（css3的新增属性）：允许长单词或者url地址换行到下一行；
3、 word-break（css3的新增属性）：规定自动换行的处理方法；

接下来，就是这几个属性的组合运用让我们可以在处理文字和字母的换行问题上得心应手

（1）要求强制不换行：

p{
   width:200px;
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:nowrap;
}
/*一般的运用：要求文字等不换行且超出范围省略号显示*/

（2）自动换行：

p{
   white-space:normal;/*(默认值)*/
}

一般的运用：要求文字等换行且限制显示行数

p{
   text-align: justify;
   display: -webkit-box !important;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: n;/*（n为要限制的行数）*/
}

（3）特殊的，针对字母以及数字的换行问题：

p{
   word-break:break-all;/*(表示按照单个字母去换行，不保证单词的完整性) */
   word-wrap:break-word;
}
p{
   word-break:break-word;/*（表示按照单词去换行，确保单词完整) */
   word-wrap:break-word;
}
/*注：此时需要把元素设置为块级元素才能看得到效果*/

参考文献：https://blog.csdn.net/u014516981/article/details/60147353