- ， 17 4月 2021
- 作者 847954981@qq.com
- 前端学习
文本内容超出省略
在网页中我们经常出现一些文本超出的情况，而一般网页对此的解决方案是通过省略号还省略超出部分。
单行文本超出省略
知识点：强制不换行、元素内容溢出处理和文本溢出省略。
文本内容超出的前提就是文本实现不换行：
代码语言：javascript复制white-space: nowrap;//文本不换行元素内容溢出 overflow
overflow属性决定了超出盒子的内容怎么显示，它有五个效果值：
值 | 描述 |
|---|---|
visible | 这是默认值，从父元素继承overflow属性的值 |
hidden | 内容会被修剪，并且超出的内容不可见 |
inherit | 内容不会被修剪，会呈现在元素框之外 |
scroll | 内容会被修剪，浏览器会显示滚动条以便查看超出的内容 |
auto | 由浏览器定夺，如果内容被修剪，就会显示滚动条 |
文本溢出省略 text-overflow
它有两个值：
clip：默认值，表示在内容区域的极限处截断文本，可以简单的理解成超出部分被一刀切掉了。 ellipsis：表示用一个省略号 (“…”)来表示被截断的文本。
多行文本超出省略
在WebKit内核中，多行文本超出省略比较简单，首先我们需要将之前单行文本中的不换行属性white-space: nowrap去掉，并设置一下属性：
/* 隐藏超出部分 */
overflow : hidden;
/* 文本超出就用省略号 */
text-overflow: ellipsis;
/* 把对象作为弹性伸缩盒子模型显示 */
display: -webkit-box;
/* WebKit内核的浏览器的私有属性，设置文本超出2行就用省略号 */
-webkit-line-clamp: 2;
/* WebKit内核的浏览器的私有属性，设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
