文本是否溢出两行，如何用CSS和JavaScript实现展开收起效果？-js教程-PHP中文网

文本是否溢出两行，如何用CSS和JavaScript实现展开收起效果？

心靈之曲

发布： 2025-02-21 17:20:19

原创

1196人浏览过

文本是否溢出两行，如何用css和javascript实现展开收起效果？

巧妙判断文本是否溢出两行

如何精准判断文本是否超过两行？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代码添加按钮：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

<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类名应用于包含你的文本的元素。

以上就是文本是否溢出两行，如何用CSS和JavaScript实现展开收起效果？的详细内容，更多请关注php中文网其它相关文章！