js如何实现当文本内容过长时，中间显示省略号...,两端正常展示

文章预览

点击 关注 公众号，“ 技术干货 ” 及时达！ 前一阵做需求时，有个小功能实现起来废了点脑细胞，觉得可以记录一下。 产品的具体诉求是：用户点击按钮进入详情页面，详情页内的卡片标题内容过长时，标题的前后两端正常展示，中间用省略号...表示，并且鼠标悬浮后，展示全部内容。 关于鼠标悬浮展示全部内容的代码就不放在这里了，本文主要写关于实现中间省略号...的代码。 实现思路 获取标题盒子的真实宽度, 我这里用的是clientWidth； 获取文本内容所占的实际宽度； 根据文字的大小计算出每个文字所占的宽度； 判断文本内容的实际宽度是否超出了标题盒子的宽度； 通过文字所占的宽度累加之和与标题盒子的宽度做对比，计算出要截取位置的索引； 同理，文本尾部的内容需要翻转一下，然后计算索引，截取完之后再翻转回来； 代码 html ………………………………