码云笔记前端博客
Home > HTML/CSS > 仅使用CSS实现带有“显示更多”按钮的多行截断文本

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

2019-09-05 分类:HTML/CSS 作者:码云 阅读(254)

本文共计1644个字,阅读时间预计5分钟,干货满满,记得点赞加收藏哦

仅使用CSS实现带有“显示更多”按钮的多行截断文本
前几天,在办公室的讨论中出现了截断的文字,我想知道CSS是否能够实现该功能,能够正确地截断文本,即支持以下内容:

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

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

展开按钮

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

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

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

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

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

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

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

1
2
3
4
5
input {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
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调整浏览器窗口的大小来查看行为)的扩展演示:

【文章来源】https://paulbakaus。com/tutorials/css/multiline-truncated-text-with-show-more-button-with-just-css/ (。改为 .)

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(6) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
6

觉得文章有用就打赏一下文章作者

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 仅使用CSS实现带有“显示更多”按钮的多行截断文本

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 472 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 228 条
  • 链接总数: 15 个
  • 标签总数: 1036 个
  • 建站时间: 522 天
  • 访问总量: 8681316 次
  • 最近更新: 2019年11月18日