多是最全的「文本溢出截斷省略」方案合集

時間 2019-11-08

標籤文本溢出截斷省略方案合集简体版

原文原文鏈接

本文首發於政採雲前端團隊博客：多是最全的「文本溢出截斷省略」方案合集

前言

在咱們的平常開發工做中，文本溢出截斷省略是很常見的一種需考慮的業務場景細節。看上去「稀鬆日常」，但在實現上卻有不一樣的區分，是單行截斷仍是多行截斷？多行的截斷判斷是基於行數仍是基於高度？這些問題之下，都有哪些實現方案？他們之間的差別性和場景適應性又是如何？凡事就怕較真，較真必有成長。本文試圖經過編碼實踐，給出一些答案。javascript

先來點基礎的，單行文本溢出省略

核心 CSS 語句前端

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

優勢java

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

短板git

只支持單行文本截斷

適用場景github

適用於單行文本溢出顯示省略號的狀況

Demoweb

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

示例圖片小程序

進階一下，多行文本溢出省略（按行數）

○ 純 CSS 實現方案

核心 CSS 語句瀏覽器

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

優勢app

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

短板ide

兼容性通常： -webkit-line-clamp 屬性只有 WebKit 內核的瀏覽器才支持

適用場景

多適用於移動端頁面，由於移動設備瀏覽器更可能是基於 WebKit 內核

Demo

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

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

示例圖片

○ 基於 JavaScript 的實現方案

優勢

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

短板

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

適用場景

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

Demo

當前僅適用於文本爲中文，若文本中有英文，可自行修改

<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；（設定當前元素最大高度）

優勢

無兼容問題
響應式截斷

短板

單純截斷文字, 不展現省略號，觀感上較爲生硬

適用場景

適用於文本溢出不須要顯示省略號的狀況

Demo

<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 {} （設置省略號樣式）

優勢

無兼容問題
響應式截斷

短板

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

適用場景

適用於對省略效果要求較低，文本必定會溢出元素的狀況

Demo

<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；（使一個單詞可以在換行時進行拆分）

優勢

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

短板

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

適用場景

適用於對省略效果要求較低，多行文本響應式截斷的狀況

Demo

<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>
</body>

示例圖片

原理講解

有 A、B、C 三個盒子，A 左浮動，B、C 右浮動。設置 A 盒子的高度與 B 盒子高度（或最大高度）要保持一致

當的 B 盒子高度低於 A 盒子，C 盒子仍會處於 B 盒子右下方。
若是 B 盒子文本過多，高度超過了 A 盒子，則 C 盒子不會停留在右下方，而是掉到了 A 盒子下。
接下來對 C 盒子進行相對定位，將 C 盒子位置向右側移動 100%，並向左上方向拉回一個 C 盒子的寬高（否則會看不到喲）。這樣在文本未溢出時不會看到 C 盒子，在文本溢出時，顯示 C 盒子。

收，大道歸簡，能力封裝

凡重複的，讓它單一；凡複雜的，讓它簡單。

每次都要搞一坨代碼，太麻煩。這時候你須要考慮將文本截斷的能力，封裝成一個可隨時調用的自定義容器組件。市面上不少 UI 組件庫，都提供了同類組件的封裝，如基於 Vue 的 ViewUI Pro，或面向小程序提供組件化解決能力的 MinUI。

結語

本文介紹了幾種目前常見的文本截斷省略的方案，各有利弊，各位同窗可根據實際開發狀況及需求選擇方案。若是你還知道更好其餘實現方案，歡迎在評論區留下寶貴評論。

參考文章

招賢納士

政採雲前端團隊（ZooTeam），一個年輕富有激情和創造力的前端團隊，隸屬於政採雲產品研發部，Base 在風景如畫的杭州。團隊現有 50 餘個前端小夥伴，平均年齡 27 歲，近 3 成是全棧工程師，妥妥的青年風暴團。成員構成既有來自於阿里、網易的「老」兵，也有浙大、中科大、杭電等校的應屆新人。團隊在平常的業務對接以外，還在物料體系、工程平臺、搭建平臺、性能體驗、雲端應用、數據分析及可視化等方向進行技術探索和實戰，推進並落地了一系列的內部技術產品，持續探索前端技術體系的新邊界。

若是你想改變一直被事折騰，但願開始能折騰事；若是你想改變一直被告誡須要多些想法，卻無從破局；若是你想改變你有能力去作成那個結果，卻不須要你；若是你想改變你想作成的事須要一個團隊去支撐，但沒你帶人的位置；若是你想改變既定的節奏，將會是「5 年工做時間 3 年工做經驗」；若是你想改變原本悟性不錯，但老是有那一層窗戶紙的模糊… 若是你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的本身。若是你但願參與到隨着業務騰飛的過程，親手推進一個有着深刻的業務理解、完善的技術體系、技術創造價值、影響力外溢的前端團隊的成長曆程，我以爲咱們該聊聊。任什麼時候間，等着你寫點什麼，發給 ZooTeam@cai-inc.com