文本溢出省略

最新推荐文章于 2022-10-09 08:55:29 发布

weixin_45519474

最新推荐文章于 2022-10-09 08:55:29 发布

阅读量832

点赞数 1

文章标签： js 文本溢出

原文链接：https://juejin.im/post/5dc15b35f265da4d432a3d10

版权

1.单行文本溢出省略

核心 css代码：
在这里插入图片描述
优点

无兼容问题
响应式截断
文本溢出范围才显示省略号，否则不显示省略号
省略号位置显示刚好

缺点

只支持单行文本截断

适用场景

适用于单行文本溢出显示省略号的情况

属性分析

2.多行文本溢出省略

核心 CSS ：

     overflow: hidden; /* 文本溢出限定的宽度就隐藏内容 */
     display: -webkit-box;  /* 将对象作为弹性伸缩盒子模型显示,和下一行结合使用 */
     -webkit-line-clamp: 5;  /* 用来限制在一个块元素显示的文本的行数, 3 表示最多显示3 行，需要组合其他的WebKit属性 */
     -webkit-box-orient: vertical;  /* 设置或检索伸缩盒对象的子元素的排列方式 */
     text-overflow: ellipsis;/* 多行文本的情况下，用省略号“…”隐藏溢出范围的文本 */

优点

响应式截断
文本溢出范围才显示省略号，否则不显示省略号
省略号显示位置刚好

缺点

兼容性一般： -webkit-line-clamp 属性只有 WebKit 内核的浏览器才支持

适用场景

多适用于移动端页面，因为移动设备浏览器更多是基于 WebKit 内核

3.多行文本溢出省略（js实现）

<body>
    <div class='demo'></div>
    <script type="text/javascript">
        const text = '这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本';
        const totalTextLen = text.length;
        const formatStr = function（）{
            const ele = document.getElementsByClassName('demo')[0];
            const lineNum = 2;
            const baseWidth = window.getComputedStyle(ele).width; //浏览器渲染过后的宽度
            const baseFontSize = window.getComputedStyle(ele).fontSize;//渲染后的字体大小
            //+:相当于+0，将字符串强转为数字(Number)类型
            const lineWidth = +baseWidth.slice(0, -2); //slice(0, -2):去掉px
            const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));//向下取整（计算结果是小数的情况）
            let content = '';
            const totalStrNum = Math.floor(strNum * lineNum);// 多行可容纳总字数：一行能容纳的字数*几行
            const lastIndex = totalStrNum - totalTextLen; //多行可容纳总字数-总字数
            if (totalTextLen > totalStrNum) {
                content = text.slice(0, lastIndex - 3).concat('...');
                //concat() 方法用于连接两个或多个数组。
            } else {
                content = text;
            }
            ele.innerHTML = content;
        }
        formatStr();
        window.onresize = () => {
            formatStr();
        };
        //onresize 事件会在窗口或框架被调整大小时发生。
    </script>
</body>

优点

兼容问题
响应式截断
文本溢出范围才显示省略号，否则不显示省略号

缺点

需要 JS 实现，背离展示和行为相分离原则
文本为中英文混合时，省略号显示位置略有偏差

适用场景

适用于响应式截断，多行文本溢出省略的情况

4.多行文本溢出省略（按高度），不显示省略号

核心 CSS 语句
在这里插入图片描述
优点

无兼容问题
响应式截断

缺点

单纯截断文字, 不展示省略号，观感上较为生硬

适用场景

适用于文本溢出不需要显示省略号的情况

5.伪元素 + 定位实现多行省略

代码
在这里插入图片描述
优点

无兼容问题
响应式截断

缺点

无法识别文字的长短，无论文本是否溢出范围, 一直显示省略号
省略号显示可能不会刚刚好，有时会遮住一半文字

适用场景

适用于对省略效果要求较低，文本一定会溢出元素的情况

*6.利用 Float 特性，纯 CSS 实现多行省略

代码

.demo {
            max-height: 40px;
            line-height: 20px;
            overflow: hidden;
        }
        .demo::before {
            float: left;
            content: '';
            width: 20px;
            height: 40px;
            background: green;
        }
        .demo .text {
            float: right;
            width: 100%;
            margin-left: -20px;
            word-break: break-all;
            background: red;
        }
        .demo::after {
            float: right;
            content: '...';
            width: 20px;
            height: 20px;
            position: relative;
            background: pink;
            left: 100%;
            transform: translate(-100%, -100%);
        }
        .box {
            width: 80%;
            height: 40px;
            margin: 100px auto;
        }
        .one {
            float: left;
            width: 40px;
            height: 40px;
            background: pink;
        }
        .two {
            float: right;
            width: 100%;
            line-height: 20px;
            background: rgb(255, 196, 2);
            margin-left: -40px;
        }
        .three {
            float: right;
            height: 20px;
            width: 40px;
            background: rgb(11, 164, 224);
            position: relative;
            left: 100%;
            transform: translate(-100%, -100%);
        }
    </style>
</head>

<body>
    <div class='demo'>
        <div class="text">这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本这是一段很长的文本</div>
    </div>
    <div class="box">
        <div class="one">
            left
        </div>
        <div class="two">
            right1文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
        </div>
        <div class="three">
            省略号
        </div>
    </div>
</body>

优点

无兼容问题
响应式截断
文本溢出范围才显示省略号，否则不显示省略号

缺点

省略号显示可能不会刚刚好，有时会遮住一半文字

适用场景

适用于对省略效果要求较低，多行文本响应式截断的情况

weixin_45519474

关注

1
点赞
踩
2

收藏

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

1.单行文本溢出省略核心 css代码：优点无兼容问题响应式截断文本溢出范围才显示省略号，否则不显示省略号省略号位置显示刚好缺点只支持单行文本截断适用场景适用于单行文本溢出显示省略号的情况属性分析2.多行文本溢出省略核心 CSS ： overflow: hidden; /* 文本溢出限定的宽度就隐藏内容 */ display: -webk...
复制链接

扫一扫