文本超过指定行数折叠

本文发布于我的个人网站：https://wintc.top/article/58，转载请注明。

        多行文本超过指定行数隐藏超出部分并显示“...查看全部”是一个常遇到的需求，网上也有人实现过类似的功能，不过还是想自己写写看，于是就写了一个Vue的组件，本文简单介绍一下实现思路。

        组件可以通过npm安装使用，需要的同学可以尝试一下：

        组件地址：https://github.com/Lushenggang/vue-overflow-ellipsis
        在线体验：https://wintc.top/laboratory/#/ellipsis

一、需求描述

        长度不定的一段文字，最多显示n行（比如3行），不超过n行正常显示；超过n行则在最后一行尾部显示“展开”或“查看全部”之类的按钮，点击按钮则展开显示全部内容，或者跳转到其它页面展示所有内容。

        预期效果如下：

 

二、实现原理

        纯CSS很难完美实现这个功能，所以还得借助JS来实现，实现思路大体相似，都是判断内容是否超过指定行数，超过则截取字符串的前x个字符，然后然后和“...查看全部”拼接在一起，这里的x即截取长度，需要动态计算。

        想通过上述方案实现，有几个问题需要解决:

• • 怎样判断文字是否超过指定行数
  • 如何计算字符串截取长度
  • 动态响应，包括响应页面布局变动、字符串变化、指定行数变化等

        下面具体研究一下这些问题。

1. 怎样判断一段文字是否超过指定行数？

        首先解决一个小问题：如何计算指定行数的高度？我首先想到的是使用textarea的rows属性，指定行数，然后计算textarea撑起的高度。另一个方法是将行高的计算值与行数相乘，即得到指定行数的高度，这个办法我没尝试过，但是想必可行。

        解决了指定行数高度的问题，计算一段文字是否超过指定行数就很容易了。我们可以将指定行数的textarea使用绝对定位absolute脱离文档流，放到文字的下方ÿ