有关带有"显示信息更多"按钮的多写作本

2021-01-20 23:02 jianzhan

恰好近期遇到这个小要求,记得很早以前全是用 JS 解决,终究那时青春年少无知。 切换类的实际操作 能够用 Checked 伪类完成,成本费会较为低1点,那末先来列1下作用关键点:

  1. 多写作本断开,显示信息省略号
  2. "显示信息更多" 按钮能够进行全部文字
  3. 进行文字后,按钮的文本变为 "收起文字"
  4. 按钮的出現标准为当文字 被断开 时(假如你文字仅有 1行 ,那就没必要显示信息了吧:sweat:)

疑惑点: text-overflow: ellipsis 不适用多行 断开 。按钮文本切换, CSS 该怎样切换文字? 按钮的出現标准又怎样分辨? 下面我将逐1解读:balloon:

多写作本断开

假定现有的 HTML 构造以下:

 

<div class="box">
  <p>文字內容</p>
</div>

假如必须单行 断开 ,1般的做法是:

 

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: "收起文字";
    }
  }
}

实际效果以下:

 

按钮款式丑的那就自身调1下咯:sweat:

按钮出現的标准

当文字少于 3行 时,按钮不可该出現,由于没必要:

 

出大难题,在网上冲浪后,发现沒有任何 伪类 能够分辨文字是不是 被断开 ,假如有,大家能够这样做:

 

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

truncated 意思是 断开 的。

但是即使这样,也没法完成大家的要求,由于当你显示信息全部文字后,你的文字就沒有 被断开 了,因此按钮会消退:

 

以上是借助1段 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;
   }
 }   
}

大家期待 切换 的情况下,按钮1直都在,而并不是文字没 被断开 的情况下就无法显示按钮,因而,大家不必须1直 监视 文字元素的尺寸更改,大家只必须1个原始值(文字原始化的情况下究竟有木有 被断开 ),也便是只监视1次!

 

entries.forEach(item => {
  //... 原先的编码
  
  observer.unobserve(item.target); // 移除监视
});

或压根不必须用这个 API ,立即网页页面原始化的情况下,遍历分辨1遍就行拉!

 

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

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

 

这样, P 元素在网页页面原始化的情况下,会全自动再加 truncated 类名,而按钮又能够1直显示信息:

 

拓展

例如你能够自定按钮款式、在底部提升1个全透明渐变色的蒙层、切换情况下的过渡实际效果:grin:

总结
 

checked 伪类是个好物品,能考虑许多要求而无需写 JS ,因而但凡相关 切换类的实际操作 都可以以考虑到用它。

以上所述是网编给大伙儿详细介绍的有关带有"显示信息更多"按钮的多写作本断开思索,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!
假如你感觉本文对你有协助,欢迎转载,烦请注明出处,感谢!