css文字换行

一、英文或数字

word-warp

设置或检索当内容超过指定容器的边界时是否断行
属性值说明normal自动换行（默认值，只在允许的断字点换行）break-word
强制换行(决定是否允许**单词(abcdefj)**内断句的。如果不允许的话，长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行，看看下一行的宽度够不够，不够的话再进行单词内的断句。

以单词作为换行依据

word-break

属性值说明normal自动换行（默认值）break-all
允许在单词内换行(不会尝试把长单词挪到下一行，而是直接就进行单词内的断句。

以字母作为换行依据
keep-all只能在半角空格或连字符处换行

二、文本

white-space

属性值说明normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。

tips

word-warp和word-break定义长单词或URL地址是否换行到下一行
需要指定盒子的width（宽度），否则换行或不换行不生效

三、单行文本超出隐藏并显示省略号
.div{
  overflow: hidden;
  text-overflow: ellipsis;//省略号
  white-space: nowrap;
}

四、多行文本超出隐藏并显示省略号
div{
  overflow: hidden; 
  text-overflow: ellipsis;
  display: -webkit-box;  
  -webkit-box-orient: vertical; // 从上到下垂直排列子元素
  -webkit-line-clamp: 2;// 显示两行内容
}