仅使用CSS实现带有“显示更多”按钮的多行截断文本

前几天，在办公室的讨论中出现了截断的文字，我想知道 CSS 是否能够实现该功能，能够正确地截断文本，即支持以下内容：

• 多行
• “显示更多”按钮，点击时展开文本

text-overflow: ellipsis 不支持多行，但是我记得可以使用 line-clamp 属性来实现多行截断文本。

展开按钮

创建“show more”按钮需要一些开箱即用的 CSS 编程。我不能使用<button> or <a>因为这是一个臭名昭著的复选框的工作，这需要一个 label 元素和一个附带的…复选框!所以我得到了如下标记:

<div class="box">
  <input type="checkbox" id="expanded">
  <p>嘿，别那样打断我。我想表达我的想法，不喜欢被关在盒子里。</p>
  <!-- 注意:遗憾的是，我没有找到一个很好的方法将 button/label 内联到段落中，在省略号后面或前面。 -->
  <label for="expanded" role="button">read more</label>
</div>

因为我把复选框放在段落的正前方，我现在可以使用:checked pseudo 类来切换截断，如下所示:

input:checked + p {
  -webkit-line-clamp: unset;
}

实际上，这正是我想要的:单击按钮，段落在截断和未截断之间切换。

事实上，复选框 hack 不仅是 hacky 和语义问题，它也不是很容易访问，因为大多数只是天真 display: none 的复选框。这导致键盘导航中断，因为您无法选中隐藏的复选框，并且标签对标签没有帮助，因为空格/输入键不会将事件转发到像 click 事件那样的复选框（这使得感觉，就像在典型的表格上一样，你会选中复选框而不是标签）。

我想让我的例子和演示尽可能的容易访问，所以为了解决这个问题，我首先使复选框 focusable/tabbable 仍然是不可见的，就像这样:

input {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

唯一剩下的问题是，我现在可以在复选框中键入，但我没有办法知道，没有一个屏幕阅读器，复选框是否聚焦或不……嗯……它是无形的。为了解决这个问题，我让标签收到一个（大致）浏览器默认焦点样式，而实际上复选框是集中的：

input:focus ~ label {
  outline: -webkit-focus-ring-color auto 5px;
}

尝试单击按钮，并尝试用您的键盘 tab 到它，然后按下空格键!

如果我不知道文本是否被截断怎么办？如何动态显示按钮？

我试过要找出我能做什么，当段落中的任意文本太长而无法放入框中时动态显示按钮，否则隐藏它。不幸的是，这是我无法用 CSS 做的一个功能，因为它需要一个:truncated 选择器，以便我们可以这样做：

.read-more { display: none; }
p:truncated + .read-more { display: block; }

其他人也有同样的想法，但从 2014 年开始的讨论没有取得任何进展。嘘!如果你真的需要这个功能，考虑使用 JS，直到浏览器支持，像这样:

const ps = document.querySelectorAll('p');
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    entry.target.classList[entry.target.scrollHeight > entry.contentRect.height ? 'add' : 'remove']('truncated');
  }
});

ps.forEach(p => {
  observer.observe(p);
});

下面是使用 JS 助手和一个调整大小框(打开Codepenand调整浏览器窗口的大小来查看行为)的扩展演示

以上关于仅使用CSS实现带有“显示更多”按钮的多行截断文本的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。