2021.7.23文本溢出设置

1.单行文本溢出显示省略号

要实现单行文本溢出时产生省略号的效果还需定义：

1、容器宽度：width：value；

2、强制文本在一行内显示:white-space：nowrap;

3、溢出内容为隐藏：overflow：hidden；

4、溢出文本显示省略号：text-overflow：ellipsis;

---

2Text-overflow属性

个数	属性	描述
1	text-overflow：clip；	不显示省略号（...），而是简单的裁切;
2	text-overflow：ellipsis；	当单行文本溢出时显示省略标记

---

3.White-space属性

个数	属性	描述
1	white-space：normal；	默认值
2	white-space：nowrap；	文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；
3	white-space：pre；	空白符会被保留，就是说浏览器可以识别空格。
4	white-space：pre-line；	合并空白符序列，但是保留换行符。
5	white-space：pre-wrap；	保留一部分空白符序列，但是正常的进行换行

---

4.Overflow属性

个数	属性	描述
1	overflow:visible;	visible:默认值，内容不会被修剪，会呈现在元素框之外；
2	overflow:hidden;	hidden：内容会被修剪，并且其余内容是不可见的；
3	overflow:auto;	auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
4	overflow:scroll;	scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;

---

5.扩展：多行显示省略号

display: -webkit-box;  将对象作为弹性伸缩盒子模型显示

-webkit-box-orient: vertical;   设置或检索伸缩盒对象的子元素的排列方式 

-webkit-line-clamp: 3;   用来限制在一个块元素显示的文本的行数

overflow: hidden;