文字根据宽高自适应省略号

卸任
2,877 阅读2分钟

前言

在前端日常开发中，省略号效果是常见的需求，遇到就复制粘贴一下代码，就完成了任务。但有的时候元素宽高是一个变值，这个时候设置-webkit-line-clamp为一个定值显然是不行的。我们要根据元素宽高、字体大小和文字行高来动态的设置-webkit-line-clamp。后面有完整代码。

正文

还是先来看看效果，有几个难点

  • 如何确定每一行高度
  • 什么时候需要出现省略号
  • 确定-webkit-line-clamp的值

动画23.gif

确定每一行高度

我们要确定每一行的实际高度为多少，我们可以创建一个元素插入到文字中，然后获取其高度、字体大小、行高进行处理。

我们获取的行高一般有以下几种情况

  1. normal,我们将每一行高度设置为创建元素的高度。
  2. 当满足new RegExp('px')，直接使用
  3. 当满足new RegExp('%')，我们使用字体大小 * 百分比
  4. 还有的情况（1.4|2em），我们取到的lineHeight都是以new RegExp('px')这个形式，直接使用

code.png

判断文字是否需要省略

我们只要判断实际文字内容的高度与元素高度的大小，实际文字内容的高度>元素高度就是需要省略。

文字范围高度rangeHeight我们会用createRange来计算。

   const range = document.createRange();
   range.setStart(dom, 0);
   range.setEnd(dom, dom.childNodes.length);
   let rangeHeight = range.getBoundingClientRect().height;

而实际文字内容的高度我们还需要加上漏算的lineHeight部分，

  • 实际文字内容的高度=rangeHeight + (rowHeight - fontHeight)

  • 当rangeHeight + (rowHeight.current - fontHeight.current) > textContainerHeight就需要省略

image.png

需要省略的行数

code.png

自适应宽高

自适应我们只需要使用ResizeObserver去观察元素大小变化就行了

code.png

完整代码

仓库地址

结语

感兴趣的可以去试试

avatar
文章
阅读
粉丝