HTML技巧篇：如何讓單行文本以及多行文本溢出顯示省略號(……)

篇文章主要給大家介紹一下在html頁面中如何讓單行文本以及多行文本溢出顯示省略號(…)。

1）單行文本溢出顯示省略號

當我們在編寫網(wǎng)頁代碼的時候，肯定會遇到過文字列表中的文字太多超出了我們所寫的寬度，導致文本換行或者文本超出了界限，這時有人就會說了，讓后臺限制一下調(diào)用的文字個數(shù)不就行了嗎，但是我們在做響應式的時候由于是百分比布局，無法計算一行會顯示多少個文字，所以這并不是一個好的解決方案，我們使用css3就可以輕松的實現(xiàn)，而且簡單好用。

核心css語句：

1、overflow:hidden; （顧名思義超出限定的寬度就隱藏內(nèi)容）

2、white-space: nowrap; （設置文字在一行顯示不能換行）

3、text-overflow: ellipsis;（規(guī)定當文本溢出時顯示省略符號來代表被修剪的文本）

我們具體的代碼效果演示就如下圖所示：（設置ul寬度為300，超出的文字內(nèi)容讓其自動隱藏并顯示...）

2）多行文本溢出顯示省略號

我們在編寫網(wǎng)頁代碼時，有時候新聞列表頁中新聞簡介可能有一行或者多行，我們要如何處理這種問題，讓其超出多行后還能顯示省略號呢，不要慌，我們css還是很強大的，已經(jīng)給我們提供了方法來處理這種問題了。

核心css語句：

1、-webkit-line-clamp:2; （用來限制在一個塊元素顯示的文本的行數(shù),2表示最多顯示2行。為了實現(xiàn)該效果，它需要組合其他的WebKit屬性）

2、display: -webkit-box; （和1結(jié)合使用，將對象作為彈性伸縮盒子模型顯示）

3、-webkit-box-orient:vertical;（和1結(jié)合使用，設置或檢索伸縮盒對象的子元素的排列方式。）

4、overflow:hidden; （顧名思義超出限定的寬度就隱藏內(nèi)容）

5、text-overflow: ellipsis;（規(guī)定當文本溢出時顯示省略符號來代表被修剪的文本）

我們具體的代碼效果演示就如下圖所示：（設置段落p寬度為300，超出2行的文字內(nèi)容讓其自動隱藏并顯示...）

好了，本篇文章就給大家說到這里，大家自己下來可以自己找例子寫一下試一試到底能不能實現(xiàn)我們所說的效果，以后在寫頁面的的遇到這種問題的時候直接復制使用即可。

每日金句：必須從過去的錯誤學習教訓而非依賴過去的成功。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

載鏈接：https://segmentfault.com/a/1190000020920000

前言

在我們的日常開發(fā)工作中，文本溢出截斷省略是很常見的一種需考慮的業(yè)務場景細節(jié)。看上去 “稀松平常” ，但在實現(xiàn)上卻有不同的區(qū)分，是單行截斷還是多行截斷？多行的截斷判斷是基于行數(shù)還是基于高度？這些問題之下，都有哪些實現(xiàn)方案？他們之間的差異性和場景適應性又是如何？凡事就怕較真，較真必有成長。本文試圖通過編碼實踐，給出一些答案。

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

核心 CSS 語句

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

優(yōu)點

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

短板

只支持單行文本截斷

適用場景

適用于單行文本溢出顯示省略號的情況

Demo

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

示例圖片

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

○ 純 CSS 實現(xiàn)方案

核心 CSS 語句

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

優(yōu)點

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

短板

兼容性一般： -webkit-line-clamp 屬性只有 WebKit 內(nèi)核的瀏覽器才支持

適用場景

多適用于移動端頁面，因為移動設備瀏覽器更多是基于 WebKit 內(nèi)核

Demo

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

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

示例圖片

○ 基于 JavaScript 的實現(xiàn)方案

優(yōu)點

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

短板

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

適用場景

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

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為元素內(nèi)部一行可容納的字數(shù)(不區(qū)分中英文)
        const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));

        let content = '';
        
          // 多行可容納總字數(shù)
        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；（文本溢出限定的寬度就隱藏內(nèi)容）
line-height: 20px；（結(jié)合元素高度，高度固定的情況下，設定行高，控制顯示行數(shù)）
max-height: 40px；（設定當前元素最大高度）

優(yōu)點

無兼容問題
響應式截斷

短板

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

適用場景

適用于文本溢出不需要顯示省略號的情況

Demo

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

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

示例圖片

○ 偽元素 + 定位實現(xiàn)多行省略

核心 CSS 語句

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

優(yōu)點

無兼容問題
響應式截斷

短板

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

適用場景

適用于對省略效果要求較低，文本一定會溢出元素的情況

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 實現(xiàn)多行省略

核心 CSS 語句

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

優(yōu)點

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

短板

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

適用場景

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

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 盒子高度（或最大高度）要保持一致

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

收，大道歸簡，能力封裝

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

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

轉(zhuǎn)載鏈接：https://segmentfault.com/a/1190000020920000

說css最常見的知識，實現(xiàn)單行、雙行文本溢出顯示省略號！如果實現(xiàn)單行文本的溢出顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要加寬度width屬來兼容部分瀏覽。

效果如下：

多行文本溢出顯示省略號的方法：

在線咨詢

上一篇：HTML字間距如何設置？#html
下一篇：HTML表標題標簽的定義與用法

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

HTML技巧篇：如何讓單行文本以及多行文本溢出顯示省略號(……)

1）單行文本溢出顯示省略號

2）多行文本溢出顯示省略號

前言

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

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

○ 純 CSS 實現(xiàn)方案

○ 基于 JavaScript 的實現(xiàn)方案

再進階一步，多行文本溢出省略（按高度）

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

○ 偽元素 + 定位實現(xiàn)多行省略

○ 利用 Float 特性，純 CSS 實現(xiàn)多行省略

收，大道歸簡，能力封裝

您的項目需求