React 多行省略的展開與收起

當字數多到一定程度就顯示省略號點點點。最初只是簡單的點點點，之后花樣越來越多，點點點加下箭頭，點點點加更多，點點點加更多加箭頭…。多行省略就是大段文字后面的花式點點點。

而我實現的是這樣的:

實現代碼:

 
            
             
               
               import React, {Component} from 'react';

class Ellipsis extends Component {
 constructor(props) {
 super(props);
 this.state = {
 show: false,
 };
 }

 toggleShow = () => {
 this.setState((state) => ({
 show: !state.show,
 }));
 }

 render() {
 const { show } = this.state;
 return(
 <div className={'ellipsis' + (show ? '' : ' show' )}>
 <style jsx>{`
 /*
 * 行高 h
 * 最大行數 n
 * ...更多容器的寬 w
 * 字號 f
 */
 
 .ellipsis {
 position: relative;
 background: rgb(230, 230, 230);
 width: 260px;
 text-align: justify;
 max-height: unset;
 line-height: 18px; /* h */
 
 }

 .ellipsis.show {
 max-height: 108px; /* h*n */
 overflow: hidden;
 }

 .ellipsis-container {
 position: relative;
 display: ${show ? 'block' : '-webkit-box'};
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 6; /* n */
 font-size: 65px; /* w */
 color: transparent;
 }

 .ellipsis-content {
 color: #000;
 display: inline;
 vertical-align: top;
 font-size: 12px; /* f */
 }

 .ellipsis-ghost {
 position:absolute;
 z-index: 1;
 top: 0;
 left: 50%;
 width: 100%;
 height: 100%;
 color: #000;
 }

 .ellipsis-ghost:before {
 content: "";
 display: block;
 float: right;
 width: 50%;
 height: 100%;
 }

 .ellipsis-placeholder {
 content: "";
 display: block;
 float: right;
 width: 50%;
 height: 108px; /* h*n */
 }

 .toggle-button {
 float: right;
 font-size: 12px; /* f */
 width: 50px; /* w */
 height: 18px; /* h */
 margin-top: -18px; /* -h */
 opacity: 0.5;
 
 }

 .toggle-button.showbutton {
 position: absolute;
 bottom: -18px;
 left: 50%;
 margin-left: -50px;
 }
 `}</style>
 <div className="ellipsis-container">
 <div className="ellipsis-content">AICoin，全球數字資產行情數據應用領跑者，致力於更高效地 提供有價值的信息，提升資產管理的效率。AICoin ，擁有全面而優質的數字資產資源，自 2013 年以 來，深耕細作，為用戶提供實時行情、專業K線、指標分析、資訊動態等專業的數據服務。AICoin，全球 數字資產行情數據應用領跑者，致力於更高效地提供有價值的信息，提升資產管理的效率。AICoin ，擁 有全面而優質的數字資產資源，自 2013 年以來，深耕細作，為用戶提供實時行情、專業K線、指標分 析、資訊動態等專業的數據服務。
 </div>
 <div className="ellipsis-ghost">
 <div className="ellipsis-placeholder"></div>
 <div className={'toggle-button' + (show ? ' showbutton' : '')}>
 <span style={{ color: `${show ? 'transparent' : '#000000'}`,
 paddingRight: '5px',
 }}
 >...
 </span>
 <span style={{ cursor: 'pointer', color: 'blue' }}
 onClick={this.toggleShow}
 >
 {show ? '[收起]' : '[展開]'}
 </span>
 </div>
 </div>
 </div>
 </div>
 );
 }
}

export default Ellipsis;
  
             
 
            
          

原理詳解:

文字溢出截斷

 
               <!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*測試*/</style>
<div style="font-size: 12px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
 <div style="color:#000;display: inline;vertical-align: top;background: rgb(204, 204, 204);">騰訊成立於1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。</div>
</div>
</body></html>

-webkit-line-clamp是webkit內核的私有css屬性，用於進行多行省略，在安卓和ios上全支持。但它固定使用省略號，無法直接擴展。而且自帶了溢出截斷邏輯，作用於容器高度。仔細考察可發現它使用的省略號是單字符…，可以用文字css屬性如font-size,letter-spacing,color等控制。

文字溢出截斷2

 
               <!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*測試*/</style>
<div style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
 <div style="color:#000;display: inline;font-size: 12px;vertical-align: top;letter-spacing: 0;background: rgb(204, 204, 204);">騰訊成立於1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處於穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號700)。</div>
</div>
</body></html>

設置外容器的font-size、letter-spacing、color，並在子容器里恢復就可以單獨設置省略號。這里外容器設置font-size的值等於2倍行高（余下要撐開的寬度可用letter-spacing補足，也可僅用font-size撐開全部的寬度），color:transparent可以讓line-clamp既擠出文字又不截斷容器高度，外容器高度達到7行而不是默認表現的6行，從而達到需要的溢出截斷效果

實現詳解:

首先寫個省略號的容器<div className="ellipsis-container">

省略號容器的樣式要注意的一點是,font-size的值要足夠大,以至於有足夠空間讓你放下"…[展開]", 而"…[展開]"只遮住了省略號的空間, 這樣就不會出現遮住半個字的現象(此現象會有點丑):

 
               .ellipsis-container {
 position: relative;
 display: ${show ? 'block' : '-webkit-box'};
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 6; /* n */
 font-size: 65px; /* w */
 color: transparent;
 }

接下來是正文的div(<div className="ellipsis-content">), 它的高度就只文本的全高度:

然后是設置"…[展開]“和”[收起]"的div:

先把.ellipsis-ghost右移到.ellipsis-container的一半位置, 然后.ellipsis-ghost::before的高度要與.ellipsis-ghost的高度保持一致, 而.ellipsis-ghost的高度是與它的父級元素(.ellipsis-container)的高度保持一致的, 又因.ellipsis-container的高度是被.ellipsis-content的文本撐開的高度, 因此, .ellipsis-ghost::before的高度其實是與文本的高度保持一致的

接着把.ellipsis-placeholder的高度設置為最小文本的呈現高度(.ellipsis的max-height), 如果文本高度大於max-height, 由於右浮動的原理, 且.ellipsis-ghost:before的高度大於.ellipsis-placeholder的高度, 則可以把"…[展開]"顯示出來, 如上顯示;

如果文本高度小於或等於max-height, 則 .ellipsis-ghost:before的高度小於或等於.ellipsis-placeholder的高度, 那么"…[展開]"則會飄走而不顯示, 如下:

最后可以在.toggle-button里設置一個點擊事件來控制是否顯示全文: