阅读 4322

关于带有"显示更多"按钮的多行文本截断思考😲

刚好最近遇到这个小需求,记得很早之前都是用JS处理,毕竟那时候年少无知。切换类的操作可以用Checked伪类实现,成本会比较低一点,那么先来列一下功能要点:

  1. 多行文本截断,显示省略号
  2. "显示更多"按钮可以展开所有文本
  3. 展开文本后,按钮的文字变成"收起文本"
  4. 按钮的出现条件为当文本被截断时(如果你文本只有一行,那就没必要显示了吧😓)

疑问点:text-overflow: ellipsis不支持多行截断。按钮文字切换,CSS该如何切换文本? 按钮的出现条件又如何判断? 下面我将逐一讲解🎈

多行文本截断

假设现有的HTML结构如下:

<div class="box">
  <p>文本内容</p>
</div>
复制代码

如果需要单行截断,一般的做法是:

p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
复制代码

效果如下:

多行文本需要用到line-clamp,定义被截断文本的行数:

p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
复制代码

效果如下:

按钮点击展示所有文本

现在HTML结构改造成如下:

<div class="box">
  <input type="checkbox" name="toggle" id="toggle" style="display: none;">
  <p>文本内容</p>
  <label for="toggle">显示更多</label>
</div>
复制代码

监听按钮的点击行为则用文首说的Checked伪类:

input[name="toggle"]:checked {
 & + p {
   -webkit-line-clamp: unset;
 }
}
复制代码

这样当用户点击(选中)的时候,将展示所有文本,未选中则收起文本:

按钮文字动态化

讲道理,当展示所有文本之后,按钮的文字应该要切换成"收起文本"CSS怎么修改文本啊,其实用伪元素的content就行了。

HTML中的文字去掉,然后换成CSS控制:

<label for="toggle"></label>

label {
  &::after {
    content: "显示更多";
  }
}
复制代码

同理可得:

input[name="toggle"]:checked {
  & ~ label {
    &::after {
      content: "收起文本";
    }
  }
}
复制代码

效果如下:

按钮样式丑的那就自己调一下咯😓

按钮出现的条件

当文本少于三行时,按钮不应该出现,因为没必要:

出大问题,网上冲浪后,发现没有任何伪类可以判断文本是否被截断,如果有,我们可以这样做:

p {
 &:truncated {
   & + label {
    display: block;
   }
 }   
}

label {
  display: none;
}
复制代码

truncated意思是截断的。

不过就算这样,也无法实现我们的需求,因为当你显示所有文本后,你的文本就没有被截断了,所以按钮会消失:

以上是依靠一段JS实现的模拟效果,源码如下:

let list = document.querySelectorAll("p");
let observer = new ResizeObserver(entries => {
  entries.forEach(item => {
    item.target.classList[item.target.scrollHeight > item.contentRect.height ? "add" : "remove"]("truncated");
  });
});

list.forEach(p => {
  observer.observe(p);
});
复制代码

原理就是监听文本元素的大小变化,然后动态增加truncated类名😂

所以,你的CSS中的truncated伪类应该改成truncated类😓

p {
 &.truncated {
   & + label {
    display: block;
   }
 }   
}
复制代码

我们希望切换的时候,按钮一直都在,而不是文本没被截断的时候就不显示按钮,因此,我们不需要一直监听文本元素的大小改变,我们只需要一个初始值(文本初始化的时候到底有没有被截断),也就是只监听一次!

entries.forEach(item => {
  //... 原来的代码
  
  observer.unobserve(item.target); // 移除监听
});
复制代码

或者根本不需要用这个API,直接页面初始化的时候,遍历判断一遍就行拉!

let list = document.querySelectorAll("p");

list.forEach(item => {
  item.classList[item.scrollHeight > item.offsetHeight ? "add" : "remove"]("truncated");
});
复制代码

这样,P元素在页面初始化的时候,会自动加上truncated类名,而按钮又可以一直显示:

扩展

比如你可以自定义按钮样式、在底部增加一个透明渐变的蒙层、切换时候的过渡效果😁

总结

checked伪类是个好东西,能满足很多需求而不用写JS,因此凡是有关切换类的操作都可以考虑用它(switch、菜单栏收缩等)。如果你觉得这篇文章不错,请别忘记点个关注哦~😊

交流

微信公众号「前端宇宙情报局」,将不定时更新最新、实用的前端技巧/技术性文章,对了偶尔还会有互联网中的趣事趣闻🍻

关注公众号,回复"1"获取群聊二维码,一起学习、一起交流、一起摸鱼🌊

关注下面的标签,发现更多相似文章
评论