--- theme: channing-cyan highlight: a11y-dark --- # 浏览器兼容性强的单行多行文本溢出截断省略方案 ## 一、需求描述多行文本溢出显示省略号...，并隐藏超出部分内容，内容不溢出时不显示省略号，要求要求能兼容Chrome、IE、Firefox等，能处理含html代码的字符串避免html结构被截取中断破坏, 能对中英文符号的处理效果（页面宽度省略号位置效果）较好。 ## 二、常见方案一使用css的-webkit-box，-webkit-line-clamp的处理方式，在兼容性上并不理想，例如IE浏览器就不支持这种实现方式，而残酷的现实是2022年的今天，某些企业（g企、y企、银行），依然要求兼容IE，甚至工作电脑上就只有IE浏览器。 ```css overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 25px; height: 85px; ``` ## 三、常见方案二截取固定字符数的方式，例如截取120字，超出部分使用省略号替代，不超出则不截取。这种方式相比方案一，兼容性更好，也有两个缺点：一是排版效果不够美观，因为英文和数字的单字符占的实际宽度要比中文小，这会产生省略号可能在行中间甚至行首，而不是统一的在行位。二是对html字符串不友好，有时接口返回的会是包含html代码的字符串，截取可能会破坏html字符串的代码结构，例如一个标签被截取部分。 ## 四、推荐方案推荐方案的浏览器兼容性说明：实测Chrome 99，Firefox 95，IE 11，Safari 14，在中英文数字等场景均表现良好。对多行和单行文本溢出显示省略号均有良好的效果。 **推荐方案的实践效果图** ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18fb91d6956643d0bb8052d6b277e831~tplv-k3u1fbpfcp-watermark.image?) ### 推荐方案一：vue指令版 ```js // 在main.js 引入该js文件即可，无需使用Vue.use，注册为全局指令的方式使用 // 创建注册指令文件 directives.js，将使用全局指令的方式实现单行多行文本溢出显示省略号 import Vue from "vue"; /** * 文本多行溢出省略处理函数： * 要求能兼容Chrome、IE、Firefox等， * 能处理含html代码的字符串避免html结构被截取中断破坏, * 能对中英文符号的处理效果（页面宽度省略号位置效果）较好。相比截取固定个数的字符串，这种方式对适用元素的宽高有更高的要求。但截取固定字数字符串在应对包含html代码的字符串时容易破坏代码结构，且单个中引文数字在页面占的宽度有差异。 * @param el 需要进行文本溢出省略的元素 */ function textOverflow(el) { Vue.nextTick(() => { console.log("指令的方式11111111：" + el.innerHTML); let text = el.innerHTML; // 遍历元素的innerHTML内容，当元素的offsetHeight小于scrollHeight（超出元素的高度溢出换行）时， // 设置溢出隐藏（overflow = "hidden"） // 将末尾的三个文字用...取代，同时跳出for循环 if (!text || !text.length) return; // console.log("指令的方式22222：" + el.innerHTML); for (let i = 0; i <= text.length; i++) { el.innerHTML = text.substr(0, i); // console.log("指令的方式3333：" + el.offsetHeight, el.scrollHeight); if (el.offsetHeight < el.scrollHeight) { el.style.overflow = "hidden"; // 截取当前字符串0-倒数第三的区间位置的字符并加上"..."，然后赋值给元素的innerHTML el.innerHTML = text.substr(0, i - 3) + "..."; console.log("指令的方式4444：" + el.innerHTML); break; } } }); } // 注册文本溢出省略指令 Vue.directive("text-overflow", textOverflow); ``` 指令版本使用示例 ```html ``` ### 推荐方案二：原生js通过获取class样式处理版 ```js /** * 文本多行溢出省略处理函数： * 要求能兼容Chrome、IE、Firefox等， * 能处理含html代码的字符串避免html结构被截取中断破坏, * 能对中英文符号的处理效果（页面宽度省略号位置效果）较好 * 注意需要在元素被赋值渲染后使用才有效，所以需要在更新数据后调用该方法 * 例如，在一个通过接口取值赋值后调用 * knowledgeApi.searchList(params).then((res) => { * this.list = res.rows || []; * this.total = res.total; * this.$common.textOverflowMore(); * }); * @param className 指定需要处理文本多行溢出省略的元素的样式名 */ export function textOverflowMore(className = "cn-text-overflow") { // 获取特定样式的标签 let elList = document.getElementsByClassName(className); // 遍历所有具有特定样式名的元素 for (let i in elList) { let el = elList[i]; let text = el.innerHTML; // 遍历元素的innerHTML内容，当元素的offsetHeight小于scrollHeight（超出元素的高度溢出换行）时， // 设置溢出隐藏（overflow = "hidden"） // 将末尾的三个文字用...取代，同时跳出for循环 if (!text || !text.length) return; for (let i = 0; i <= text.length; i++) { el.innerHTML = text.substr(0, i); if (el.offsetHeight < el.scrollHeight) { el.style.overflow = "hidden"; // 截取当前字符串0-倒数第三的区间位置的字符并加上"..."，然后赋值给元素的innerHTML el.innerHTML = text.substr(0, i - 3) + "..."; break; } } } } ```