当前位置: 首页> 财经> 访谈 > CSS文本溢出截断省略

CSS文本溢出截断省略

时间:2025/7/10 20:08:33来源:https://blog.csdn.net/Runnymmede/article/details/139823958 浏览次数:0次

文本溢出截断省略

文本溢出截断省略是比较常见的业务场景,主要分为单行文本溢出截断省略与多行文本溢出截断省略,单行的截断方案比较简单,多行截断相对比较复杂。

单行溢出省略

单行文本溢出截断省略直接使用CSS即可,其无兼容问题,文本溢出范围才显示省略号,否则不显示省略号,省略号位置显示刚好,但是只能作为单行文本溢出截断省略的解决方案。

<section><div class="t1">很长很长很长很长很长很长很长很长的文本</div><div class="t1">不很长的文本</div>
</section>
<style type="text/css">.t1{white-space: nowrap; /* 文字在一行显示不能换行 */overflow: hidden; /* 文字长度超出限定宽度则截断 */text-overflow: ellipsis; /* 文本溢出时显示省略符号 */}
</style>

多行溢出省略

按行计算 CSS方案

多行文本溢出截断省略按行计算使用CSS,其文本溢出范围才显示省略号,否则不显示省略号,省略号位置显示刚好,但是兼容性一般,line-clamp属性只有WebKit内核的浏览器才支持,多适用于移动端页面,因为移动设备浏览器更多是基于WebKit内核。

<section><div class="t2">不很长的文本</div><div class="t2">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
</section>
<style type="text/css">.t2{-webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数 兼容性 https://caniuse.com/#search=line-clamp */display: -webkit-box; /* 显示为弹性伸缩盒子模型 */box-orient: vertical; /* 设置伸缩盒对象的子元素的排列方式 */overflow: hidden; /* 文字长度超出限定宽度则截断 */text-overflow: ellipsis; /* 文本溢出时显示省略符号 */}
</style>

按行计算 Js方案

多行文本溢出截断省略按行计算使用Js,其无兼容问题,文本溢出范围才显示省略号,否则不显示省略号,但是需要Js实现,背离展示和行为相分离原则,文本为中英文混合时,省略号显示位置略有偏差。

<section><div class="t3">不很长的文本</div><div class="t3">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
</section>
<script type="text/javascript">(function(){var lineNum = 3;var elements = document.getElementsByClassName("t3");Array.prototype.forEach.call(elements, element => {var text = element.innerText;var textLen = text.length;var baseWidth = window.getComputedStyle(element).width;var fontsize = window.getComputedStyle(element).fontSize;var lineWidth = baseWidth.slice(0, -2);var charCount = Math.floor(lineWidth / fontsize.slice(0, -2)); // 计算一行内可容纳字数var content = "";var totalStrNum = Math.floor(charCount * lineNum); // 多行可容纳总字数var lastIndex = totalStrNum - textLen;if (textLen > totalStrNum) content = text.slice(0, lastIndex - 3).concat('...');else content = text;element.innerText = content;})})();
</script>

按高度计算 CSS方案

多行文本溢出截断省略按高度计算使用CSS,利用Float的浮动,通过::before::after两个伪元素实现浮动操作,其无兼容问题,文本溢出范围才显示省略号,否则不显示省略号,但省略号显示可能不会刚刚好,有时会遮住一半文字。

<section><div class="t4"><div class="text">不很长的文本</div></div><div class="t4"><div class="text">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div></div>
</section>
<style type="text/css">.t4 {max-height: 40px;line-height: 20px;overflow: hidden;}.t4::before{float: left;content:"";width: 20px;height: 40px;}.t4 .text {float: right;width: 100%;margin-left: -20px;word-break: break-all;}.t4::after{float:right;background-color: #fff;content:'...';width: 20px;height: 20px;position: relative;left:100%;transform: translate(-100%,-100%);}
</style>

代码示例

<!DOCTYPE html>
<html>
<head><title>文本溢出截断省略</title><style type="text/css">#container{width: 300px;border: 1px solid #eee;position: relative;}section{padding: 5px 0;margin: 5px;border-bottom: 1px solid #eee;}.t1{white-space: nowrap; /* 文字在一行显示不能换行 */overflow: hidden; /* 文字长度超出限定宽度则截断 */text-overflow: ellipsis; /* 文本溢出时显示省略符号 */}.t2{-webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数 */display: -webkit-box; /* 显示为弹性伸缩盒子模型 */-webkit-box-orient: vertical; /* 设置伸缩盒对象的子元素的排列方式 */overflow: hidden; /* 文字长度超出限定宽度则截断 */text-overflow: ellipsis; /* 文本溢出时显示省略符号 */}.t4 {max-height: 40px;line-height: 20px;overflow: hidden;}.t4::before{float: left;content:"";width: 20px;height: 40px;}.t4 .text {float: right;width: 100%;margin-left: -20px;word-break: break-all;}.t4::after{float:right;background-color: #fff;content:'...';width: 20px;height: 20px;position: relative;left:100%;transform: translate(-100%,-100%);}</style>
</head>
<body><div id="container"><section><div class="t1">不很长的文本</div><div class="t1">很长很长很长很长很长很长很长很长的文本</div></section><section><div class="t2">不很长的文本</div><div class="t2">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div></section><section><div class="t3">不很长的文本</div><div class="t3">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div></section><section><div class="t4"><div class="text">不很长的文本</div></div><div class="t4"><div class="text">很长很长很长很长很长很长很长很长的很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div></div></section></div></body>
<script type="text/javascript">(function(){var lineNum = 3;var elements = document.getElementsByClassName("t3");Array.prototype.forEach.call(elements, element => {var text = element.innerText;var textLen = text.length;var baseWidth = window.getComputedStyle(element).width;var fontsize = window.getComputedStyle(element).fontSize;var lineWidth = baseWidth.slice(0, -2);var charCount = Math.floor(lineWidth / fontsize.slice(0, -2)); // 计算一行内可容纳字数var content = "";var totalStrNum = Math.floor(charCount * lineNum); // 多行可容纳总字数var lastIndex = totalStrNum - textLen;if (textLen > totalStrNum) content = text.slice(0, lastIndex - 3).concat('...');else content = text;element.innerText = content;})})();
</script>
</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jb51.net/css/718058.html
https://zhuanlan.zhihu.com/p/92576904
https://www.jianshu.com/p/391702bd5b6b
关键字:CSS文本溢出截断省略

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: