0x027-css-如何截断长文本并显示阅读更多更少按钮(译)

如果您正在开发一个包含用户生成内容（例如博客文章、评论等）的应用程序，则可能会出现内容太长而无法显示的情况，因此有必要截断它们并在其下方放置“阅读更多”按钮。

这篇文章将仅关注前端，网络浏览器将检测是否需要截断文本，并仅根据需要显示多读/少读。 （如果文字足够短，则不要显示“阅读更多”）

使用 CSS 截断文本 ​

引用自TailwindCSS/line-clamp 插件。

使用这些 CSS 属性的组合，我们可以将文本（例如： <p>...</p> ）截断为我们想要的行数：

.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* truncate to 4 lines */
  -webkit-line-clamp: 4;
}

.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* truncate to 4 lines */
  -webkit-line-clamp: 4;
}

如果文本长度超过 4 行，则会被截断并以“ ... ”结尾。如果文本短于 4 行，则不进行任何更改。

现在我们成功地截断了文本，下一步是检查文本是否被截断，正如您所看到的，即使我们设置了webkit-line-clamp ，上面的短文本（第二段）也没有被截断它。

我们想要检查文本是否确实被截断，以便我们可以为其显示“阅读更多”按钮（对于未截断的短文本，我们不需要显示“阅读更多”）。

使用offsetHeight和scrollHeight检查文本是否被截断 ​

HTML 元素有两个属性，我们可以使用它们来检查文本是否被截断： offsetHeight和scrollHeight 。来自 Mozilla 开发文档，

offsetHeight
is a measurement in pixels of the element’s CSS height, including any borders, padding, and horizontal scrollbars (if rendered).

scrollHeight :
is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar.

这是 StackOverflow 关于什么是 offsetHeight 和scrollHeight 的一个很好的答案。这是可视化的摘要：

scrollHeight 是可滚动内容的总高度，offsetHeight 是屏幕上的可见高度。对于溢出视图，scrollHeight 大于offsetHeight。

我们可以推断，如果scrollHeight大于offsetHeight，则元素将被截断。

var element = document.querySelector('p');

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element has overflow and truncated
    // show read more / read less button
} else {
    // your element doesn't overflow (not truncated)
}

var element = document.querySelector('p');

if (element.offsetHeight < element.scrollHeight ||
    element.offsetWidth < element.scrollWidth) {
    // your element has overflow and truncated
    // show read more / read less button
} else {
    // your element doesn't overflow (not truncated)
}

切换截断 ​

假设您已经准备好.line-clamp-4 CSS 类，我们可以通过在段落元素上添加/删除此类来切换截断，代码可以放入“阅读更多/阅读更少”按钮的onclick操作中：

<button onclick="document.querySelector('p').classList.remove('line-clamp-4')">Read more...</button>

<button onclick="document.querySelector('p').classList.add('line-clamp-4')">Read less...</button>

<button onclick="document.querySelector('p').classList.remove('line-clamp-4')">Read more...</button>

<button onclick="document.querySelector('p').classList.add('line-clamp-4')">Read less...</button>

Demo ​

我使用 Alpine.js 和 TailwindCSS 为此制作了一个演示，您可以在 CodePen 上查看演示： https://codepen.io/cupnoodle/pen/powvObw 。请随意在您的项目中使用它。