在网页中我们经常出现一些文本超出的情况,而一般网页对此的解决方案是通过省略号还省略超出部分。
单行文本超出省略
知识点:强制不换行、元素内容溢出处理和文本溢出省略。
文本内容超出的前提就是文本实现不换行:
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;