文本溢出截断省略

最新推荐文章于 2023-02-22 10:54:09 发布

菜同学

最新推荐文章于 2023-02-22 10:54:09 发布

阅读量350

点赞数

分类专栏：常见问题文章标签：溢出截断 css JavaScript

本文链接：https://blog.csdn.net/qq_41530816/article/details/103514214

版权

常见问题专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1. 单行文本超出截断显示省略号

    css {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    white-space: nowrap;  文本在一行显示，不换行
    overflow: hidden;     让超出的文本隐藏起来
    text-overflow: ellipsis; 显示省略号代表被修剪的文本
    优点：
    没有兼容问题
    响应式截断
    文本溢出范围才显示省略号， 否则不显示省略号
    省略号显示位置刚好
    缺点：
    只支持单行文本截断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本超出时显示 ...</title>
    <style>
        .content {
            background: lightcyan;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">之前看过一个观点叫“凡事提前10分钟，效果惊人”： 如果提前10分钟起床，就可以从容地照照镜子整整妆容，出门时就不会那么狼狈了； 如果提前10分钟出门，就不用担心上班迟到，不用担心扣工资，不用担心错过重要的会议内容了； 如果提前10分钟准备会议资料，开会时就不会手忙脚乱，被点到发言时就不会吞吞吐吐，更不会被领导训， 道理人人都懂，但真能做到的却并不多。许多人都是间歇性踌躇满志，持续性浑浑噩噩，嘴里喊着要早点行动，身体却很诚实地继续拖拉。 明明下决心要早睡早起，一不小心就刷手机刷到夜里两点，第二天早上起来依然手忙脚乱；早上决定要在下班前写完方案，结果写了两句又忍不住刷起了朋友圈，到下班时方案才开了个头，一时的拖延看似无害，长期的拖延却会悄悄把你拖入深渊。</div>
    </div>
</body>
</html>

2. 多行文本超出显示省略号

    css {
        -webkit-line-clamp: 4;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    -webkit-line-clamp: 4; 限制在元素内应该显示的行数
    display: -webkit-box; 结合1使用，将对象作为弹性伸缩盒子模型
    -webkit-box-orient: vertical; 结合1使用， 设置或检索伸缩盒对象的子元素的排列方式
    overflow: hidden; 让超出的文本隐藏起来
    优点： 
    响应式截断
    文本溢出范围才显示省略号， 否则不显示省略号
    省略号显示位置刚好
    多适用于移动端页面，因为移动设备浏览器更多是基于 WebKit 内核
    缺点：
    兼容性一般： -webkit-line-clamp 属性只有 Webkit 内核的浏览器才支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本超出时显示 ...</title>
    <style>
        .content {
            background: lightcyan;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">之前看过一个观点叫“凡事提前10分钟，效果惊人”： 如果提前10分钟起床，就可以从容地照照镜子整整妆容，出门时就不会那么狼狈了； 如果提前10分钟出门，就不用担心上班迟到，不用担心扣工资，不用担心错过重要的会议内容了； 如果提前10分钟准备会议资料，开会时就不会手忙脚乱，被点到发言时就不会吞吞吐吐，更不会被领导训， 道理人人都懂，但真能做到的却并不多。许多人都是间歇性踌躇满志，持续性浑浑噩噩，嘴里喊着要早点行动，身体却很诚实地继续拖拉。 明明下决心要早睡早起，一不小心就刷手机刷到夜里两点，第二天早上起来依然手忙脚乱；早上决定要在下班前写完方案，结果写了两句又忍不住刷起了朋友圈，到下班时方案才开了个头，一时的拖延看似无害，长期的拖延却会悄悄把你拖入深渊。</div>
    </div>
</body>
</html>

3. JavaScript 实现文本超出显示省略号(中文没问题，英文单词可能会显示不全)

    var elem = document.getElementsByClassName('类名'); 获取元素
    elem.style.overflow = 'hidden'; 超出元素高度的不显示
    var elemText = '很长很长的文本'; 显示的长文本
    var elemHeight = elem.clientHeight; 获取元素的可视区域的高度
    遍历文本，让元素显示文本， 当 元素的内容高度 大于 元素的可视区域的高度时 截取后三个字显示为 ... 并跳出循环
    for (let i = 0; i < elemText.length; i++) {
        elem.innerHTML = elemText.substr(0, i);
        if (elem.scrollHeight > elemHeight) {
            elem.innerHTML = elemText.substr(0, i-3) + '...';
            break;
        }
    }
    缺点：
    不是响应式截断， 需每次手动刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本超出时显示 ...</title>
    <style>
        .content {
            background: lightcyan;
            height: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content"></div>
    </div>
    <script>
        var elem = document.getElementsByClassName('content')[0];
        var elemText = '之前看过一个观点叫“凡事提前10分钟，效果惊人”： 如果提前10分钟起床，就可以从容地照照镜子整整妆容，出门时就不会那么狼狈了； 如果提前10分钟出门，就不用担心上班迟到，不用担心扣工资，不用担心错过重要的会议内容了； 如果提前10分钟准备会议资料，开会时就不会手忙脚乱，被点到发言时就不会吞吞吐吐，更不会被领导训， 道理人人都懂，但真能做到的却并不多。许多人都是间歇性踌躇满志，持续性浑浑噩噩，嘴里喊着要早点行动，身体却很诚实地继续拖拉。 明明下决心要早睡早起，一不小心就刷手机刷到夜里两点，第二天早上起来依然手忙脚乱；早上决定要在下班前写完方案，结果写了两句又忍不住刷起了朋友圈，到下班时方案才开了个头，一时的拖延看似无害，长期的拖延却会悄悄把你拖入深渊。';
        var elemHeight = elem.clientHeight;
        elem.style.overflow = 'hidden';
        for (let i = 0; i < elemText.length; i++) {
            elem.innerHTML = elemText.substr(0, i);
            if (elem.scrollHeight > elemHeight) {
                elem.innerHTML = elemText.substr(0, i-3) + '...';
                break;
            }
        }
    </script>
</body>
</html>

参考文章：
可能是最全的 “文本溢出截断省略” 方案合集
 【css/js】限制一行和多行文字数量，超出部分用省略号显示

菜同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本溢出截断省略

1. 单行文本超出截断显示省略号 css { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } white-space: nowrap; 文本在一行显示，不换行 overflow: hidden; 让超出的文本隐藏起来 ...
复制链接

扫一扫

专栏目录