1200字范文 > CSS 实现单行多行文本溢出显示省略号（…）

CSS 实现单行多行文本溢出显示省略号（…）

时间：2022-05-07 02:21:11

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

直接用 css 属性 text-overflow: ellipsis; 设置：

{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

2、多行文本溢出显示省略号

直接用 css 属性 -webkit-line-clamp: n; （n是需要展示的行数）设置：

{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

Tips:

-webkit-line-clamp: 限制在一个块元素显示的文本的行数，为了实现该效果，需要结合其他的属性：

display: -webkit-box; //必须结合的属性，将对象作为弹性伸缩盒子模型显示

-webkit-box-orient //必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式

因为使用了 webkit 的 css 扩展属性，该方法适用于 webkit 浏览器及移动端。

改进方法：通过伪类在目标元素末尾处添加省略号。

.setEllipsis {border: 1px solid #ccc;position: relative;max-height: 90px;overflow: hidden;}.setEllipsis::after {content: "...";position: absolute;bottom: 0;right: 0;padding-left: 40px;background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(right, transparent, #fff 55%);background: -moz-linear-gradient(right, transparent, #fff 55%);background: linear-gradient(to right, transparent, #fff 55%);}

该方法适用范围广，但也有局限性：文字未超出行的情况下也会出现省略号。可结合 js 进行优化：

1.将 height 设置为 line-height 的整数倍，防止超出的文字露出。

2.给 p::after 添加渐变背景可避免文字只显示一半。

3.由于 ie6-7 不显示 content 内容，所以要添加标签兼容 ie6-7（如：<span>…<span/>）；兼容 ie8 需要将 ::after 替换成 :after。

实现效果：

实现代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>test</title><style style="text/css">.wrapper {width: 400px;line-height: 30px;}.text {border: 1px solid #ccc;height: 30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.multiText {border: 1px solid #ccc;height: 90px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}.setEllipsis {border: 1px solid #ccc;position: relative;max-height: 90px;overflow: hidden;}.setEllipsis::after {content: "...";position: absolute;bottom: 0;right: 0;padding-left: 40px;background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(right, transparent, #fff 55%);background: -moz-linear-gradient(right, transparent, #fff 55%);background: linear-gradient(to right, transparent, #fff 55%);}</style></head><body><div class="wrapper"><h4>单行文本超出显示...</h4><div class="text">单行文本超出显示省略号单行文本超出显示省略号单行文本超出显示省略号单行文本超出显示省略号</div><h4>多行文本超出显示...</h4><div>方法一（通过-webkit-line-clamp: 3;实现）</div><div class="multiText">多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号</div><div>方法二（通过伪类实现）</div><div class="setEllipsis">多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号多行文本超出显示省略号</div></div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。