刚好最近遇到这个小需求，记得很早之前都是用 JS 处理，毕竟那时候年少无知。 切换类的操作 可以用 Checked 伪类实现，成本会比较低一点，那么先来列一下功能要点：
- 多行文本截断，显示省略号
- "显示更多" 按钮可以展开所有文本
- 展开文本后，按钮的文字变成 "收起文本"
- 按钮的出现条件为当文本 被截断 时（如果你文本只有 一行 ，那就没必要显示了吧: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 ，因此凡是有关 切换类的操作 都可以考虑用它。
以上所述是小编给大家介绍的关于带有"显示更多"按钮的多行文本截断思考,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
显示更多,按钮,文本截断
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。