单行和多行文本超出省略号

单行和多行文本超出省略号

// 单行文本出现省略号
width: 300px;
overflow: hidden; // 超出内容不可见
text-overflow: ellipsis;   // 省略号显示
white-space: nowrap; // 文本不换行
word-break: break-all; // 允许在单词内换行
 
// 多行文本出现省略号
display: -webkit-box; /*重点，不能用block等其他，将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）*/
-webkit-line-clamp: 3; /*行数，超出三行隐藏且多余的用省略号表示...*/
line-clamp: 3; /*设置省略号在容器第三行文本后*/
word-break: break-all;
overflow: hidden;
max-width: 100%;
复制代码

text-overflow

该属性规定了当文本溢出包含元素时所发生的事情。

clip： 修剪文本；
ellipsis：显示省略号来代表被修剪的文本；
string：使用给定的字符串来代表被修剪的文本；

当标题过长时，影响页面效果时，text-overflow 属性发挥它的作用，使用…或者其他字符串代替。

white-space

该属性用来设置如何处理元素内的空白，也可以规定段落中的文本是否换行，它的值必须是 nowrap ，否则text-overflow 属性失效；

normal： 默认，空白会被浏览器忽略；
pre： 空白会被浏览器保留，其行为方式类似于HTML 中的<pre> 标签；
nowrap： 文本不会换行，文本会在同一行继续，直到遇到<br>标签；
pre-wrap：保留空白符序列，但是正常的进行换行；
pre-line：合并空白符序列，但是保留换行符；
inherit：规定应该从父元素继承 white-sapce 属性；

overflow

该属性规定当元素溢出元素框时所发生的事情；

visible：默认值，内容不会被修剪，会呈现在元素框之外。
hidden：内容会被修剪，其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容；
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容；
inherit：规定应该从父元素继承 overflow 属性的值；

word-break

该属性规定自动换行的处理方法；
通过word-break 属性，可以让浏览器实现在任意位置的换行；

noraml：使用浏览器的默认换行规则；
break-all：允许在单词内换行；
keep-all：只能在半角空格或者连字符处换行；