脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 前端文本溢出展开收起

前端实现文本溢出展开和收起功能

 更新时间：2025年04月15日 11:16:21   作者：小周同学_丶  
在现代网页设计中,文本是网页中最重要的内容之一,然而,当文本超出其容器的大小时,会发生文本溢出的问题,文本溢出不仅会影响网页的视觉效果,还会影响网页的可读性和可用性,所以本文给大家介绍了前端实现文本溢出展开和收起功能的方法,需要的朋友可以参考下

判断文本溢出

众所周知，单行文本溢出打点仅需要：

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

而单行文本判断是否溢出的关键就是element.scrollWidth > element.clientWidth

需要注意的是，当使用以上方式判断的时候，不要给元素加上overflow: hidden的样式，不然获取的clientWidth一直都是等于scrollWidth。

示例

先看下元素结构：

<div class="wrapper">
  <div class="text">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. nulla facere
    obcaecati consequatur quisquam adipisci veritatis! Deserunt nostrum
    doloribus minima voluptatum labore.
    <span class="more">展开</span>
    <span class="collapse">收起</span>
  </div>
</div>

文本在.text的元素中，里面有展开、收起两个按钮

再写点样式：

.wrapper {
  width: fit-content;
  height: fit-content;
  border-radius: 8px;
  border: 1px solid #00bfbf;
  padding: 8px;
}
 
.text {
  width: 300px;
  font-size: 14px;
  line-height: 20px;
}

于是就得到如下图所示的展示效果：

初始化将展开/收起按钮隐藏 

/* 展开/收起按钮初始隐藏 */
.text .more {
  display: none;
}
.text .collapse {
  display: none;
}

要使用scrollWidth去判断文本是否溢出，关键需要给.text添加white-space: nowrap;

当需要给.text元素添加单行文本溢出的3行代码，不要直接添加到.text类名下（直接写overflow: hidden就不能使用scrollWidth判断文本溢出了）

另加一个类名，比如：.ellipsis，然后使用js判断文本是否溢出，再给该元素添加该类名。

.text.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

让.more按钮仅在.ellipsis下展示，再给.more按钮写点样式，css代码如下：

/* 溢出 */
.text.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
/* 文字溢出 - 展开按钮 */
.text.ellipsis .more {
  display: block;
}
 
.more {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  color: #00bfbf;
  background-color: #fff;
  font-size: 14px;
  line-height: 20px;
  width: fit-content;
  cursor: pointer;
}
 
.more::after {
  content: "";
  display: block;
  position: absolute;
  height: 20px;
  width: 60px;
  right: 28px;
  top: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 1)
  );
}

就得到以下效果：

js判断文本溢出如下：

const isTextOverflowX = (elem) => {
  return text.clientWidth < text.scrollWidth;
};
 
const text = document.getElementsByClassName("text")[0];
 
const isTextOverflow = isTextOverflowX(text);
 
if (isTextOverflow) {
  text.classList.add("ellipsis");
}

判断文本溢出后，才会给文字添加overflow: hidden，为了避免页面文字闪烁，给初始文本元素添加opacity: 0，在判断完毕后，设置opacity: 1

修改一下css，js代码

.text {
  ...
  white-space: nowrap;
  opacity: 0;
}
 
/* 未溢出 */
.text.normal {
  white-space: unset; // 让文字正常换行
  opacity: 1;
}
/* 溢出 */
.text.ellipsis {
  ...
  opacity: 1;
}
if (isTextOverflow) {
  text.classList.add("ellipsis");
} else {
  text.classList.add("normal");
}

分别给展开、收起按钮添加点击事件，事件仅需要添加、删除类名即可

const more = document.getElementsByClassName("more")[0];
more.addEventListener("click", () => {
  text.classList.remove("ellipsis");
  text.classList.add("expand");
});
 
const collapse = document.getElementsByClassName("collapse")[0];
collapse.addEventListener("click", () => {
  text.classList.remove("expand");
  text.classList.add("ellipsis");
});

这里又加了个新类名.expand为了控制文本展开后的按钮显示隐藏

/* 文本展开 */
.text.expand {
  white-space: unset;
  opacity: 1;
}
/* 文本展开 - 收起按钮 */
.text.expand .collapse {
  display: inline-block;
}

最终效果如下：

完整代码

HTML: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文字溢出隐藏</title>
    <link rel="stylesheet" href="./index.css" rel="external nofollow"  />
    <script src="./index.js" defer></script>
  </head>
  <body>
    <div class="wrapper">
      <div class="text">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum animi
        cum consequuntur beatae, culpa impedit excepturi fuga, nulla facere
        obcaecati consequatur quisquam adipisci veritatis! Deserunt nostrum
        doloribus minima voluptatum labore.
        <span class="more">展开</span>
        <span class="collapse">收起</span>
      </div>
    </div>
  </body>
</html>

CSS: 

.wrapper {
  width: fit-content;
  height: fit-content;
  border-radius: 8px;
  border: 1px solid #00bfbf;
  padding: 8px;
  margin: 30px auto;
}
 
.text {
  width: 300px;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  opacity: 0;
}
/* 展开/收起按钮初始隐藏 */
.text .more {
  display: none;
}
.text .collapse {
  display: none;
}
 
/* 未溢出 */
.text.normal {
  white-space: unset;
  opacity: 1;
}
/* 溢出 */
.text.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  opacity: 1;
}
/* 文字溢出 - 展开按钮 */
.text.ellipsis .more {
  display: block;
}
 
/* 文本展开 */
.text.expand {
  white-space: unset;
  opacity: 1;
}
/* 文本展开 - 收起按钮 */
.text.expand .collapse {
  display: inline-block;
}
 
.more {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  color: #00bfbf;
  background-color: #fff;
  font-size: 14px;
  line-height: 20px;
  width: fit-content;
  cursor: pointer;
}
 
.more::after {
  content: "";
  display: block;
  position: absolute;
  height: 20px;
  width: 60px;
  right: 28px;
  top: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 1)
  );
}
 
.collapse {
  color: #00bfbf;
  cursor: pointer;
}

JS: 

const isTextOverflowX = (elem) => {
  return text.clientWidth < text.scrollWidth;
};
 
const text = document.getElementsByClassName("text")[0];
 
const isTextOverflow = isTextOverflowX(text);
 
if (isTextOverflow) {
  text.classList.add("ellipsis");
} else {
  text.classList.add("normal");
}
 
const more = document.getElementsByClassName("more")[0];
more.addEventListener("click", () => {
  text.classList.remove("ellipsis");
  text.classList.add("expand");
});
 
const collapse = document.getElementsByClassName("collapse")[0];
collapse.addEventListener("click", () => {
  text.classList.remove("expand");
  text.classList.add("ellipsis");
});

拓展

多行文本溢出

多行文本展开收起的思路一样的

需要修改下文本溢出判断函数，使用clientHeight、scrollHeight判断：

const isTextOverflowY = (elem) => {
  return text.clientHeight < text.scrollHeight;
};

.ellipsis溢出css修改为多行文本溢出打点即可

.ellipsis {
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

以上就是前端实现文本溢出展开和收起功能的详细内容，更多关于前端文本溢出展开收起的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • JavaScript模块随意拖动示例代码

    JavaScript模块随意拖动示例代码

    这篇文章主要介绍了JavaScript模块随意拖动的具体实现,需要的朋友可以参考下
    2014-05-05
  • 前端如何判断多个请求完毕的实战及常见问题

    前端如何判断多个请求完毕的实战及常见问题

    在前端开发中,判断多个请求完毕是一个常见需求,这篇文章主要介绍了前端如何判断多个请求完毕实战及常见问题的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-03-03
  • javascript实现京东登录显示隐藏密码

    javascript实现京东登录显示隐藏密码

    这篇文章主要为大家详细介绍了javascript实现京东登录显示隐藏密码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 屏蔽相应键盘按钮操作

    屏蔽相应键盘按钮操作

    本篇文章主要是对屏蔽相应键盘按钮的操作代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-03-03
  • js 异步处理进度条

    js 异步处理进度条

    js 异步处理进度条的实现代码，需要的朋友可以参考下。
    2010-04-04
  • Chart.js 轻量级HTML5图表绘制工具库（知识整理）

    Chart.js 轻量级HTML5图表绘制工具库（知识整理）

    这篇文章主要介绍了Chart.js 轻量级HTML5图表绘制工具库，Chart.js基于HTML5 canvas技术支持所有现代浏览器，并且针对IE7/8提供了降级替代方案，感兴趣的小伙伴们可以参考一下
    2018-05-05
  • Javascript单例模式的介绍和实例

    Javascript单例模式的介绍和实例

    这篇文章将会介绍Javascript模式中较为常见和实用的模式——单例模式，主要分为概念和实例部分。在介绍实例的同时也会对代码中额外的知识点进行讲解。有需要的朋友们可以参考借鉴。
    2016-10-10
  • Js实现动态添加删除Table行示例

    Js实现动态添加删除Table行示例

    这篇文章主要介绍了Js动态添加删除Table行的具体实现,需要的朋友可以参考下
    2014-04-04
  • Three.js 3D标签实现方法对比全面总结

    Three.js 3D标签实现方法对比全面总结

    three.js是一个开源的JavaScript库,允许开发者在浏览器中无需安装额外插件的情况下实现3D内容,这篇文章主要介绍了Three.js 3D标签实现方法对比的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-11-11
  • js解决movebox移动问题

    js解决movebox移动问题

    这篇文章主要为大家详细介绍了js解决movebox移动问题，取消图片默认拖动事件，感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论