文本溢出截断省略

文本溢出截断省略

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

单行溢出省略#

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

Copy
<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内核。

Copy
<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实现，背离展示和行为相分离原则，文本为中英文混合时，省略号显示位置略有偏差。

Copy
<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两个伪元素实现浮动操作，其无兼容问题，文本溢出范围才显示省略号，否则不显示省略号，但省略号显示可能不会刚刚好，有时会遮住一半文字。

Copy
<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>

代码示例#

Copy
<!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>

每日一题#

Copy
https://github.com/WindrunnerMax/EveryDay

参考#

Copy
https://www.jb51.net/css/718058.html
https://zhuanlan.zhihu.com/p/92576904
https://www.jianshu.com/p/391702bd5b6b
posted @   WindRunnerMax  阅读(449)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示
CONTENTS
✕