判断文本溢出

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

1. .ellipsis {
   
2.   overflow: hidden;
   
3.   text-overflow: ellipsis;
   
4.   white-space: nowrap;
   
5. }

复制代码

而单行文本判断是否溢出的关键就是element.scrollWidth > element.clientWidth
需要注意的是，当使用以上方式判断的时候，不要给元素加上overflow: hidden的样式，不然获取的clientWidth一直都是等于scrollWidth。

示例

先看下元素结构：

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

复制代码

文本在

1. .text

复制代码

的元素中，里面有展开、收起两个按钮
再写点样式：

1. .wrapper {
   
2.   width: fit-content;
   
3.   height: fit-content;
   
4.   border-radius: 8px;
   
5.   border: 1px solid #00bfbf;
   
6.   padding: 8px;
   
7. }
   
8. 
   
9. .text {
   
10.   width: 300px;
    
11.   font-size: 14px;
    
12.   line-height: 20px;
    
13. }

复制代码

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

初始化将

1. 展开

复制代码

/

1. 收起

复制代码

按钮隐藏

1. /* 展开/收起按钮初始隐藏 */
   
2. .text .more {
   
3.   display: none;
   
4. }
   
5. .text .collapse {
   
6.   display: none;
   
7. }

复制代码

要使用scrollWidth去判断文本是否溢出，关键需要给.text添加white-space: nowrap;
当需要给.text元素添加单行文本溢出的3行代码，不要直接添加到.text类名下（直接写overflow: hidden就不能使用scrollWidth判断文本溢出了）
另加一个类名，比如：.ellipsis，然后使用js判断文本是否溢出，再给该元素添加该类名。

1. .text.ellipsis {
   
2.   overflow: hidden;
   
3.   text-overflow: ellipsis;
   
4.   white-space: nowrap;
   
5. }

复制代码

让.

1. more

复制代码

按钮仅在.

1. ellipsis

复制代码

下展示，再给.

1. more

复制代码

按钮写点样式，css代码如下：

1. /* 溢出 */
   
2. .text.ellipsis {
   
3.   overflow: hidden;
   
4.   text-overflow: ellipsis;
   
5.   white-space: nowrap;
   
6.   position: relative;
   
7. }
   
8. /* 文字溢出 - 展开按钮 */
   
9. .text.ellipsis .more {
   
10.   display: block;
    
11. }
    
12. 
    
13. .more {
    
14.   position: absolute;
    
15.   right: 0;
    
16.   top: 50%;
    
17.   transform: translateY(-50%);
    
18.   display: block;
    
19.   color: #00bfbf;
    
20.   background-color: #fff;
    
21.   font-size: 14px;
    
22.   line-height: 20px;
    
23.   width: fit-content;
    
24.   cursor: pointer;
    
25. }
    
26. 
    
27. .more::after {
    
28.   content: "";
    
29.   display: block;
    
30.   position: absolute;
    
31.   height: 20px;
    
32.   width: 60px;
    
33.   right: 28px;
    
34.   top: 0;
    
35.   background: linear-gradient(
    
36.     to right,
    
37.     rgba(255, 255, 255, 0),
    
38.     rgba(255, 255, 255, 0.6),
    
39.     rgba(255, 255, 255, 1)
    
40.   );
    
41. }

复制代码

就得到以下效果：

js判断文本溢出如下：

1. const isTextOverflowX = (elem) => {
   
2.   return text.clientWidth < text.scrollWidth;
   
3. };
   
4. 
   
5. const text = document.getElementsByClassName("text")[0];
   
6. 
   
7. const isTextOverflow = isTextOverflowX(text);
   
8. 
   
9. if (isTextOverflow) {
   
10.   text.classList.add("ellipsis");
    
11. }

复制代码

判断文本溢出后，才会给文字添加

1. overflow: hidden

复制代码

，为了避免页面文字闪烁，给初始文本元素添加

1. opacity: 0

复制代码

，在判断完毕后，设置

1. opacity: 1

复制代码

修改一下css，js代码

1. .text {
   
2.   ...
   
3.   white-space: nowrap;
   
4.   opacity: 0;
   
5. }
   
6. 
   
7. /* 未溢出 */
   
8. .text.normal {
   
9.   white-space: unset; // 让文字正常换行
   
10.   opacity: 1;
    
11. }
    
12. /* 溢出 */
    
13. .text.ellipsis {
    
14.   ...
    
15.   opacity: 1;
    
16. }

复制代码

1. if (isTextOverflow) {
   
2.   text.classList.add("ellipsis");
   
3. } else {
   
4.   text.classList.add("normal");
   
5. }

复制代码

分别给

1. 展开

复制代码

、

1. 收起

复制代码

按钮添加点击事件，事件仅需要添加、删除类名即可

1. const more = document.getElementsByClassName("more")[0];
   
2. more.addEventListener("click", () => {
   
3.   text.classList.remove("ellipsis");
   
4.   text.classList.add("expand");
   
5. });
   
6. 
   
7. const collapse = document.getElementsByClassName("collapse")[0];
   
8. collapse.addEventListener("click", () => {
   
9.   text.classList.remove("expand");
   
10.   text.classList.add("ellipsis");
    
11. });

复制代码

这里又加了个新类名

1. .expand

复制代码

为了控制文本展开后的按钮显示隐藏

1. /* 文本展开 */
   
2. .text.expand {
   
3.   white-space: unset;
   
4.   opacity: 1;
   
5. }
   
6. /* 文本展开 - 收起按钮 */
   
7. .text.expand .collapse {
   
8.   display: inline-block;
   
9. }

复制代码

最终效果如下：

完整代码


HTML:

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

复制代码

CSS:

1. .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;}/* 展开/收起按钮初始隐藏 */
   
2. .text .more {
   
3.   display: none;
   
4. }
   
5. .text .collapse {
   
6.   display: none;
   
7. } /* 未溢出 */.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;} /* 文本展开 */
   
8. .text.expand {
   
9.   white-space: unset;
   
10.   opacity: 1;
    
11. }
    
12. /* 文本展开 - 收起按钮 */
    
13. .text.expand .collapse {
    
14.   display: inline-block;
    
15. } .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:

1. const isTextOverflowX = (elem) => {
   
2.   return text.clientWidth < text.scrollWidth;
   
3. };
   
4. 
   
5. const text = document.getElementsByClassName("text")[0];
   
6. 
   
7. const isTextOverflow = isTextOverflowX(text);
   
8. 
   
9. if (isTextOverflow) {
   
10.   text.classList.add("ellipsis");
    
11. } else {  text.classList.add("normal");} const more = document.getElementsByClassName("more")[0];
    
12. more.addEventListener("click", () => {
    
13.   text.classList.remove("ellipsis");
    
14.   text.classList.add("expand");
    
15. });
    
16. 
    
17. const collapse = document.getElementsByClassName("collapse")[0];
    
18. collapse.addEventListener("click", () => {
    
19.   text.classList.remove("expand");
    
20.   text.classList.add("ellipsis");
    
21. });

复制代码

拓展


多行文本溢出

多行文本展开收起的思路一样的
需要修改下文本溢出判断函数，使用

1. clientHeight

复制代码

、

1. scrollHeight

复制代码

判断：

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

复制代码

1. .ellipsis

复制代码

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

1. .ellipsis {
   
2.     overflow : hidden;
   
3.     text-overflow: ellipsis;
   
4.     display: -webkit-box;
   
5.     -webkit-line-clamp: 2;
   
6.     -webkit-box-orient: vertical;
   
7. }

复制代码

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

来源：https://www.jb51.net/javascript/339651vnd.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！