巧妙判断文本是否溢出两行
如何精准判断文本是否超过两行？CSS的-webkit-line-clamp属性提供了一种便捷的解决方案。通过设置-webkit-line-clamp: 2，我们可以限制文本显示为两行。如果文本长度超过两行，浏览器会自动添加省略号。
为了实现“展开收起”功能，我们需要结合以下CSS样式：
<code class="css">.text-container {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
}</code>
text-overflow: ellipsis; 显示省略号；white-space: nowrap; 防止文本换行；overflow: hidden; 隐藏超出容器的文本；cursor: pointer; 将鼠标指针变为手型，提示用户可点击。
立即学习“Java免费学习笔记（深入）”；
创建“展开收起”按钮
使用简单的HTML代码添加按钮：
<code class="html"><button id="toggle-button">展开</button></code>
并设置CSS样式，使其定位于文本下方：
<code class="css">#toggle-button {
position: absolute;
bottom: 0;
right: 0;
}</code>
JavaScript实现状态切换
最后，通过JavaScript代码控制文本显示状态和按钮文字的切换：
<code class="javascript">document.getElementById("toggle-button").addEventListener("click", function() {
const textContainer = document.querySelector(".text-container");
if (textContainer.classList.contains("collapsed")) {
textContainer.classList.remove("collapsed");
this.textContent = "收起";
} else {
textContainer.classList.add("collapsed");
this.textContent = "展开";
}
});</code>
这段代码监听按钮点击事件，通过添加或移除collapsed类名来控制文本的显示状态，并同时更新按钮文字。 你需要在你的CSS中定义.text-container.collapsed样式来控制文本收起时的显示方式（例如，恢复文本换行，移除white-space: nowrap;和overflow: hidden;等）。
通过以上CSS和JavaScript代码的结合，即可实现文本溢出两行判断及展开收起效果。 记住将.text-container类名应用于包含你的文本的元素。
