文本溢出截斷省略

單行文本溢出省略#

核心 CSS 語句#

overflow: hidden；（文字長度超出限定寬度，則隱藏超出的內容）
white-space: nowrap；（設定文字在一行顯示，不能換行）
text-overflow: ellipsis；（規定當文本溢出時，顯示省略符號來代表被修剪的文本）

Pros#

無兼容問題
響應式截斷
文本溢出範圍才顯示省略號，否則不顯示省略號
省略號位置顯示剛好

<style>
    .demo {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<body>
	<div class="demo">這是一段很長的文本</div>
</body>

多行文本溢出省略（按行數）#

核心 CSS 語句#

-webkit-line-clamp: 2；（用來限制在一個塊元素顯示的文本的行數，2 表示最多顯示 2 行。為了實現該效果，它需要組合其他的 WebKit 屬性）
display: -webkit-box；（和 1 結合使用，將對象作為彈性伸縮盒子模型顯示）
-webkit-box-orient: vertical；（和 1 結合使用，設定或檢索伸縮盒對象的子元素的排列方式）
overflow: hidden；（文本溢出限定的寬度就隱藏內容）
text-overflow: ellipsis；（多行文本的情況下，用省略號 “…” 隱藏溢出範圍的文本）

Pros#

響應式截斷
文本溢出範圍才顯示省略號，否則不顯示省略號
省略號顯示位置剛好

Cons#

兼容性一般： -webkit-line-clamp 屬性只有 WebKit 內核的瀏覽器才支持（適用於移動端頁面）

<style>
	.demo {
		display: -webkit-box;
	    overflow: hidden;
	    -webkit-line-clamp: 2;
	    -webkit-box-orient: vertical;
	}
</style>

<body>
	<div class='demo'>這是一段很長的文本</div>
</body>

基於 JavaScript 的實現方案#

適用於響應式截斷，多行文本溢出省略的情況

Pros#

無兼容問題
響應式截斷
文本溢出範圍才顯示省略號，否則不顯示省略號

Cons#

需要 JS 實現，背離展示和行為相分離原則
文本為中英文混合時，省略號顯示位置略有偏差

<script type="text/javascript">
    const text = '這是一段很長的文本';
    const totalTextLen = text.length;
    const formatStr = () => {
        const ele = document.getElementsByClassName('demo')[0];
        const lineNum = 2;
        const baseWidth = window.getComputedStyle(ele).width;
        const baseFontSize = window.getComputedStyle(ele).fontSize;
        const lineWidth = +baseWidth.slice(0, -2);

        // 所計算的strNum為元素內部一行可容納的字數（不區分中英文）
        const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));

        let content = '';
        
      	// 多行可容納總字數
        const totalStrNum = Math.floor(strNum * lineNum);

        const lastIndex = totalStrNum - totalTextLen;

        if (totalTextLen > totalStrNum) {
            content = text.slice(0, lastIndex - 3).concat('...');
        } else {
            content = text;
        }
        ele.innerHTML = content;
    }
    
    formatStr();
    
	window.onresize = () => {
        formatStr();
    };
</script>

<body>
	<div class='demo'></div>
</body>

多行文本溢出不顯示省略號#

核心 CSS 語句#

overflow: hidden；（文本溢出限定的寬度就隱藏內容）
line-height: 20px；（結合元素高度，高度固定的情況下，設定行高，控制顯示行數）
max-height: 40px；（設定當前元素最大高度）

Pros#

無兼容問題
響應式截斷

Cons#

單純截斷文字，不展示省略號，觀感上較為生硬

<style>
	.demo {
		overflow: hidden;
		max-height: 40px;
		line-height: 20px;
	}
</style>

<body>
	<div class='demo'>這是一段很長的文本</div>
</body>

偽元素 + 定位實現多行省略#

核心 CSS 語句#

position: relative; （為偽元素絕對定位）
overflow: hidden; （文本溢出限定的寬度就隱藏內容）
position: absolute;（給省略號絕對定位）
line-height: 20px; （結合元素高度，高度固定的情況下，設定行高，控制顯示行數）
height: 40px; （設定當前元素高度）
::after {} （設定省略號樣式）

Pros#

無兼容問題
響應式截斷

Cons#

無法識別文字的長短，無論文本是否溢出範圍，一直顯示省略號
省略號顯示可能不會剛剛好，有時會遮住一半文字

<style>
    .demo {
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

<body>
	<div class='demo'>這是一段很長的文本</div>
</body>

利用 Float 特性，純 CSS 實現多行省略#

核心 CSS 語句#

line-height: 20px；（結合元素高度，高度固定的情況下，設定行高，控制顯示行數）
overflow: hidden；（文本溢出限定的寬度就隱藏內容）
float: right/left；（利用元素浮動的特性實現）
position: relative；（根據自身位置移動省略號位置，實現文本溢出顯示省略號效果）
word-break: break-all；（使一個單詞能夠在換行時進行拆分）

Pros#

無兼容問題
響應式截斷
文本溢出範圍才顯示省略號，否則不顯示省略號

Cons#

省略號顯示可能不會剛剛好，有時會遮住一半文字

<style>
    .demo {
        background: #099;
        max-height: 40px;
        line-height: 20px;
        overflow: hidden;
    }
    .demo::before{
        float: left;
        content:'';
        width: 20px;
        height: 40px;
    }
    .demo .text {
        float: right;
        width: 100%;
        margin-left: -20px;
        word-break: break-all;
    }
    .demo::after{
        float:right;
        content:'...';
        width: 20px;
        height: 20px;
        position: relative;
        left:100%;
        transform: translate(-100%,-100%);
    }
</style>

<body>
    <div class='demo'>
    	<div class="text">這是一段很長的文本</div>
    </div>
</body>

References:
https://juejin.cn/post/6844903988081475591