文本超出两行如何自动展开并显示“展开”按钮？

这就是坑。
使用 CSS-webkit-line-clamp 实现。
如果行数超过2 ，则会出现展开按钮。
使用JavaScript检测scrollHeight和clientHeight。
单击扩展按钮可使用 classList.toggle 切换扩展类。
这就是操作。

文本超出两行如何自动展开并显示下箭头？

结论：利用CSS和JS实现文字换行效果。

CSS部分： .text-container { 显示：-webkit-box； -webkit线夹：2 ； -webkit-box-orient：垂直； 溢出：隐藏； 位置：相对；
.text-container::after { 内容：“↓”； 位置：绝对； 正确：0； 底部：0； 光标：指针； 显示：无； }
.text-container.expanded { -webkit-line-clamp：未设置； 溢出：可见； }
.text-container.expanded::after { 内容：“↑”； }
.text-container.show-arrow { 溢出：隐藏； }
.text-container.show-arrow::after { 显示：块； JS部分： constContainers = document.querySelectorAll('.text-container'); 容器.forEach（容器=> { const text =Container.querySelector('.text'); if (text.scrollHeight >Container.clientHeight) { Container.classList.add('显示箭头'); } Container.addEventListener('点击', () => { Container.classList.toggle('高级'); }); });
改进计划： 将伪元素替换为真实空间：

文字内容

↓

constarrows = document.querySelectorAll('.arrow'); arrows.forEach(箭头=> { arrow.addEventListener('点击', (e) => { const 容器 = e.target.parentElement; Container.classList.toggle('高级'); arrow.textContent = container.classList.contains('扩展')? “↑”：“↓”； }); });
要点： 1 .使用-webkit-line-clamp限制行数。
2 .使用ScrollHeight和clientHeight来定义溢出。
3 . 使用点击事件切换扩展类。
4 .用真实的DOM元素替换伪元素更方便。

兼容性：对于WebKit以外的浏览器，需要Polyfill或JS计算高度解决方案。

CSS:限制在一个块元素显示的文本的行数

上周我正在设计一个网页，需要限制特定块元素的文本行数。
我尝试了三种方法。

2 02 3 年 3 月，我第一次尝试了 webkit-line-clamp 属性。
这个东西很方便，但是兼容性不好，主要工作在WebKit核心的浏览器上。

然后我尝试了文本溢出属性。
这个东西一般是和空格一起用的：nowrap;和溢出：隐藏；。
它非常适合溢出单行文本，但是为了限制多行文本，我需要寻找其他方法。

最后我采用了overflow和height属性结合的方法。
这种方法兼容性很好，但是需要先知道文字的大概行高，否则设置高度相当繁琐。

但是，我认为webkit-line-clamp属性虽然方便，但是兼容性有限。
文本溢出属性主要用于处理单行文本溢出。
因此，如果结合使用溢出和高度设置，兼容性会更好，尽管需要提前知道文本行高，我认为这是一个不错的选择。
由你决定。