前端實現(xiàn)文本溢出展開和收起功能

更新時間：2025年04月15日 11:16:21 作者：小周同學_丶

在現(xiàn)代網(wǎng)頁設計中,文本是網(wǎng)頁中最重要的內(nèi)容之一,然而,當文本超出其容器的大小時,會發(fā)生文本溢出的問題,文本溢出不僅會影響網(wǎng)頁的視覺效果,還會影響網(wǎng)頁的可讀性和可用性,所以本文給大家介紹了前端實現(xiàn)文本溢出展開和收起功能的方法,需要的朋友可以參考下

判斷文本溢出

眾所周知，單行文本溢出打點僅需要：

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

而單行文本判斷是否溢出的關鍵就是element.scrollWidth > element.clientWidth

需要注意的是，當使用以上方式判斷的時候，不要給元素加上overflow: hidden的樣式，不然獲取的clientWidth一直都是等于scrollWidth。

示例

先看下元素結(jié)構(gòu)：

<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");
});

拓展

多行文本溢出

多行文本展開收起的思路一樣的

需要修改下文本溢出判斷函數(shù)，使用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;
}

以上就是前端實現(xiàn)文本溢出展開和收起功能的詳細內(nèi)容，更多關于前端文本溢出展開收起的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

JavaScript模塊隨意拖動示例代碼
這篇文章主要介紹了JavaScript模塊隨意拖動的具體實現(xiàn),需要的朋友可以參考下
2014-05-05
前端如何判斷多個請求完畢的實戰(zhàn)及常見問題
在前端開發(fā)中,判斷多個請求完畢是一個常見需求,這篇文章主要介紹了前端如何判斷多個請求完畢實戰(zhàn)及常見問題的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-03-03
javascript實現(xiàn)京東登錄顯示隱藏密碼
這篇文章主要為大家詳細介紹了javascript實現(xiàn)京東登錄顯示隱藏密碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08
屏蔽相應鍵盤按鈕操作
本篇文章主要是對屏蔽相應鍵盤按鈕的操作代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
js 異步處理進度條
js 異步處理進度條的實現(xiàn)代碼，需要的朋友可以參考下。
2010-04-04
Chart.js 輕量級HTML5圖表繪制工具庫（知識整理）
這篇文章主要介紹了Chart.js 輕量級HTML5圖表繪制工具庫，Chart.js基于HTML5 canvas技術支持所有現(xiàn)代瀏覽器，并且針對IE7/8提供了降級替代方案，感興趣的小伙伴們可以參考一下
2018-05-05
Javascript單例模式的介紹和實例
這篇文章將會介紹Javascript模式中較為常見和實用的模式——單例模式，主要分為概念和實例部分。在介紹實例的同時也會對代碼中額外的知識點進行講解。有需要的朋友們可以參考借鑒。
2016-10-10
Js實現(xiàn)動態(tài)添加刪除Table行示例
這篇文章主要介紹了Js動態(tài)添加刪除Table行的具體實現(xiàn),需要的朋友可以參考下
2014-04-04
Three.js?3D標簽實現(xiàn)方法對比全面總結(jié)
three.js是一個開源的JavaScript庫,允許開發(fā)者在瀏覽器中無需安裝額外插件的情況下實現(xiàn)3D內(nèi)容,這篇文章主要介紹了Three.js?3D標簽實現(xiàn)方法對比的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-11-11
js解決movebox移動問題
這篇文章主要為大家詳細介紹了js解決movebox移動問題，取消圖片默認拖動事件，感興趣的小伙伴們可以參考一下
2016-03-03