手机人、店、物联网
推荐图文
推荐站内新闻
点击排行

关于带有"显示更多"按钮的多行文本截断思考心得技巧网页制作

核心提示:刚好最近遇到这个小需求,记得很早之前都是用 JS 处理,毕竟那时候年少无知。 切换类的操作 可以用 Checked 伪类实现,成本会比

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

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

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

多行文本截断

假设现有的 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: "收起文本";    }  }}

效果如下:

 

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

按钮出现的条件

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

 

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

 

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 类名:joy:

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

 

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 类名,而按钮又可以一直显示:

 

扩展

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

总结
 

checked 伪类是个好东西,能满足很多需求而不用写 JS ,因此凡是有关 切换类的操作 都可以考虑用它。

以上所述是小编给大家介绍的关于带有"显示更多"按钮的多行文本截断思考,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

   日期:2020-03-25     来源:脚本之家    浏览:133158    评论:0    
 
随时随地 附近购物 采购批发 预约消费 到店取货 一件代发 上全信网

扫一扫分享到微信朋友圈

资源来源于全球各大网站平台,如有冒犯或者侵犯您的隐私或权利,请及时留言或者系平台,我们收到通知后会及时因情况严重予以删除或者下架相关内容

打赏
 
更多>同类站内新闻
0相关评论

申请链接  |  更多>
友情链接

按字母顺序分类

a      b      c      d      e      f      g      h      i      j      k      l      m      n      o      p      q      r      s      t      u      v      w      x      y      z     
随缘买
随机播
快递物流公司商务合作  |  我要开店 全信网商家入驻  |  办信用卡  |  常见问题  |  全信网小程序----让所有实体拥有自己的商城小程序、随时随地接单  |  信呗  |  急速到账  |  认领店铺  |  联系全信网人工客服  |  邀请得奖励  | 

  • 官方微信


  • 小程序

  • 官方微信客服


  • 官方APP

粤公网安备 44030902001450号


粤ICP备18107276号-2