单行和多行CSS集合的“截断和跳过文本溢出”解决方案

terry 2年前 (2023-09-27) 阅读数 64 #数据结构与算法

在日常开发工作中，截断和跳过文本溢出是一个非常常见的需要考虑的业务场景细节。看似“通用”，但实现上却存在各种差异。是单行缩写还是多行缩写？多行截断是根据行数判断还是根据高度判断？针对这些问题的实施方案有哪些？它们之间有什么区别以及场景的适应性？害怕在一切事情上都更加真实。更加诚实会带来成长。本文试图通过编码实践来提供一些答案。

让我们从一些基础开始，省略单行文本溢出

基本CSS命令

溢出：隐藏；（文字长度超过限制宽度，多余内容隐藏）
white-space: nowrap; （设置文本显示在一行且不能换行）
text-overflow: ellipse; （指定文本溢出时，显示椭圆符号来表示被裁剪的文本）

优点

无兼容性问题
响应式截断，否则只显示椭圆，显示范围时椭圆是不显示
椭圆位置显示准确

缺点

仅支持截断一行文本

适用的单行显示场景

适合省略号适合示例样品image
进阶，省略多行文本溢出（根据行数）
○纯CSS实现方案
基本CSS语句❙web:2; （用于限制块元素中显示的文本行数，2表示最多可以显示2行，必须与其他WebKit属性结合才能达到此效果）
display: - webkit-box; （和1组合使用，将对象显示为灵活的盒子模型）
-webkit-box-orient：垂直；（与 1 结合使用来设置或获取 Flexbox 对象的子元素的排列）
Overflow: hide ; （文本超过限制宽度时隐藏内容）
text-overflow: ellipse; （对于多行文本，使用三个点“...”隐藏超出范围的文本）

优点

响应式缩短
只有文本超出范围时才显示省略号，否则显示省略号不显示
椭圆显示在正确的位置

缺点

兼容性一般：-webkit-line-clamp属性仅支持WebKit核心的浏览器

适用场景

多适用于移动网站，因为移动浏览器更多基于WebKit核心
```
<style>
	.demo {
		  display: -webkit-box;
	    overflow: hidden;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	}
</style>

<body>
	<div class='demo'>这是一段很长的文本</div>
</body>
复制代码
```
演示图
○基于JavaScript实现
优点
- 无兼容性问题
- 响应式截断否则会显示省略号，否则省略号越过的文本不会显示
缺点需要实现偏离显示与行为分离原则的JS
文本为中英文混合时，椭圆的显示位置略有偏差

适用场景

适合响应式截断，多行文本避免溢出情况

示例

目前仅适用于中文文本。如果文本包含英文，您可以自行编辑

<script type="text/javascript">
    const text = '这是一段很长的文本';
    const totalTextLen = text.length;
    const formatStr = () => {
        const ele = document.getElementsByClassName('demo')[0];
        const lineNum = 2;
        const baseWidth = window.getComputedStyle(ele).width;
        const baseFontSize = window.getComputedStyle(ele).fontSize;
        const lineWidth = +baseWidth.slice(0, -2);

        // 所计算的strNum为元素内部一行可容纳的字数(不区分中英文)
        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('...');
        } else {
            content = text;
        }
        ele.innerHTML = content;
    }
    
    formatStr();
    
		window.onresize = () => {
        formatStr();
    };
</script>

<body>
	<div class='demo'></div>
</body>
复制代码

示例图片

更进一步，跳过多行文本溢出（按高度）？缺点
简单缩短文字，不显示省略号，看起来挺生硬的

适用场景

适合文字溢出，不需要显示省略号的情况

演示

<style>
	.demo {
		overflow: hidden;
		max-height: 40px;
		line-height: 20px;
	}
</style>

<body>
	<div class='demo'>这是一段很长的文本</div>
</body>

复制代码

示例图片" alt="avatar" data-src="https://www.cainiaoxueyuan.com/wp-content/uploads/2020/02/6e6780f6a08818f234acc"ifg7b -width="714" data -height="500" />

○ 伪元素+位置实现多行跳行

基础CSS命令

position：相对；（伪元素的绝对位置）
overflow：隐藏;（内容隐藏，当文字超过限制宽度时）
position:absolute;（椭圆的绝对定位）
行高:20px;（结合元素高度，当高度固定时，设置row 为 High，控制显示行数）
height: 40px;(设置当前元素高度)
::after {} (设置椭圆样式)

优点

无兼容性问题
响应式截断

缺点

无法识别文字长度，无论文字是否超出范围，总是显示省略号，可能无法正确显示，有时会遮住一半文字.

适用场景

适用于省略效果要求不高，文字肯定会溢出元素

示例

<style>
    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

<body>
	<div class='demo'>这是一段很长的文本</div>
</body>
复制代码

示例图片

○使用CSS Float干净利落地跳行

核心CSS命令

行高：20px；（高度固定时结合元素高度，设置行高，控制显示行数）
overflow：隐藏；（文本超出限制宽度，内容将被隐藏）
浮动：右/左；（利用浮动元素特性实现）
位置：相对；（根据自身位置移动省略号，实现文字溢出效果，显示省略号）
自动换行：全部换行；（点在一行上换行时允许断字）

优点

无兼容性问题
响应式截断
仅当文本超过显示的三个点的范围时不显示省略号

缺点

省略号硒显示可能不正确，有时会覆盖一半文本

适用场景

适用于跳过效果较低、多行文本响应式截断的情况演示
```
<style>
    .demo {
        background: #099;
        max-height: 40px;
        line-height: 20px;
        overflow: hidden;
    }
    .demo::before{
        float: left;
        content:'';
        width: 20px;
        height: 40px;
    }

    .demo .text {
        float: right;
        width: 100%;
        margin-left: -20px;
        word-break: break-all;
    }
    .demo::after{
        float:right;
        content:'...';
        width: 20px;
        height: 20px;
        position: relative;
        left:100%;
        transform: translate(-100%,-100%);
    }
</style>

<body>
    <div class='demo'>
    	<div class="text">这是一段很长的文本</div>
    </div>
</body>
复制代码
```
示例图片
原理讲解
有A、B、C三个盒子，A向左浮动，B、C向右浮动。设置A盒的高度与B盒的高度（或最大高度）一致
1. 当B盒的高度低于A盒时，C盒仍会在B盒的右下角。
2. 如果 B 框文字过多，高度超出 A 框，则 C 框不会停留在右下角，而是落在 A 框下方。
3. 接下来进行 C 框的相对放置，移动位置将字段 C 的 100% 向右拖动，然后将左上角的字段 C 的宽度和高度向后拖动（否则您将看不到）。这样，当文本没有溢出时，C 字段将不会被看到，而当文本溢出时，C 字段将可见。
结论，简单，能力封装
重复的，简化；凡是复杂的事情，就让它变得简单。
每次都要写很多代码，太麻烦了。此时，您需要考虑缩短文本并将其封装在可以随时调用的自定义容器组件中。市面上很多UI组件库都提供了类似组件的封装，比如基于Vue的ViewUI Pro或者MinUI，都为小程序提供了组件化的解决方案。
作者：正彩云前端团队
链接：https://juejin.im/post/5dc15b35f265da4d432a3d10
版权：掘金作者：掘金商业转载请联系作者授权。非商业转载请注明出处。