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

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

1）單行文本溢出顯示省略號(hào)

當(dāng)我們?cè)诰帉懢W(wǎng)頁代碼的時(shí)候，肯定會(huì)遇到過文字列表中的文字太多超出了我們所寫的寬度，導(dǎo)致文本換行或者文本超出了界限，這時(shí)有人就會(huì)說了，讓后臺(tái)限制一下調(diào)用的文字個(gè)數(shù)不就行了嗎，但是我們?cè)谧鲰憫?yīng)式的時(shí)候由于是百分比布局，無法計(jì)算一行會(huì)顯示多少個(gè)文字，所以這并不是一個(gè)好的解決方案，我們使用css3就可以輕松的實(shí)現(xiàn)，而且簡(jiǎn)單好用。

核心css語句：

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

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

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

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

2）多行文本溢出顯示省略號(hào)

我們?cè)诰帉懢W(wǎng)頁代碼時(shí)，有時(shí)候新聞列表頁中新聞簡(jiǎn)介可能有一行或者多行，我們要如何處理這種問題，讓其超出多行后還能顯示省略號(hào)呢，不要慌，我們css還是很強(qiáng)大的，已經(jīng)給我們提供了方法來處理這種問題了。

核心css語句：

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

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

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

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

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

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

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

每日金句：必須從過去的錯(cuò)誤學(xué)習(xí)教訓(xùn)而非依賴過去的成功。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。

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

前言

在我們的日常開發(fā)工作中，文本溢出截?cái)嗍÷允呛艹Ｒ姷囊环N需考慮的業(yè)務(wù)場(chǎng)景細(xì)節(jié)?？瓷先?“稀松平常” ，但在實(shí)現(xiàn)上卻有不同的區(qū)分，是單行截?cái)噙€是多行截?cái)?？多行的截?cái)嗯袛嗍腔谛袛?shù)還是基于高度？這些問題之下，都有哪些實(shí)現(xiàn)方案？他們之間的差異性和場(chǎng)景適應(yīng)性又是如何？凡事就怕較真，較真必有成長(zhǎng)。本文試圖通過編碼實(shí)踐，給出一些答案。

先來點(diǎn)基礎(chǔ)的，單行文本溢出省略

核心 CSS 語句

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

優(yōu)點(diǎn)

無兼容問題
響應(yīng)式截?cái)?/li>
文本溢出范圍才顯示省略號(hào)，否則不顯示省略號(hào)
省略號(hào)位置顯示剛好

短板

只支持單行文本截?cái)?/li>

適用場(chǎng)景

適用于單行文本溢出顯示省略號(hào)的情況

Demo

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

示例圖片

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

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

核心 CSS 語句

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

優(yōu)點(diǎn)

響應(yīng)式截?cái)?/li>
文本溢出范圍才顯示省略號(hào)，否則不顯示省略號(hào)
省略號(hào)顯示位置剛好

短板

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

適用場(chǎng)景

多適用于移動(dòng)端頁面，因?yàn)橐苿?dòng)設(shè)備瀏覽器更多是基于 WebKit 內(nèi)核

Demo

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

<body>
    <div class='demo'>這是一段很長(zhǎng)的文本</div>
</body>

示例圖片

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

優(yōu)點(diǎn)

無兼容問題
響應(yīng)式截?cái)?/li>
文本溢出范圍才顯示省略號(hào)，否則不顯示省略號(hào)

短板

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

適用場(chǎng)景

適用于響應(yīng)式截?cái)?，多行文本溢出省略的情況

Demo

當(dāng)前僅適用于文本為中文，若文本中有英文，可自行修改

<script type="text/javascript">
    const text = '這是一段很長(zhǎng)的文本';
    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);

        // 所計(jì)算的strNum為元素內(nèi)部一行可容納的字?jǐn)?shù)(不區(qū)分中英文)
        const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2));

        let content = '';
        
          // 多行可容納總字?jǐn)?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>

示例圖片

再進(jìn)階一步，多行文本溢出省略（按高度）

○ 多行文本溢出不顯示省略號(hào)

核心 CSS 語句

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

優(yōu)點(diǎn)

無兼容問題
響應(yīng)式截?cái)?/li>

短板

單純截?cái)辔淖? 不展示省略號(hào)，觀感上較為生硬

適用場(chǎng)景

適用于文本溢出不需要顯示省略號(hào)的情況

Demo

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

<body>
    <div class='demo'>這是一段很長(zhǎng)的文本</div>
</body>

示例圖片

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

核心 CSS 語句

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

優(yōu)點(diǎn)

無兼容問題
響應(yīng)式截?cái)?/li>

短板

無法識(shí)別文字的長(zhǎng)短，無論文本是否溢出范圍, 一直顯示省略號(hào)
省略號(hào)顯示可能不會(huì)剛剛好，有時(shí)會(huì)遮住一半文字

適用場(chǎng)景

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

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'>這是一段很長(zhǎng)的文本</div>
</body>

示例圖片

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

核心 CSS 語句

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

優(yōu)點(diǎn)

無兼容問題
響應(yīng)式截?cái)?/li>
文本溢出范圍才顯示省略號(hào)，否則不顯示省略號(hào)

短板

省略號(hào)顯示可能不會(huì)剛剛好，有時(shí)會(huì)遮住一半文字

適用場(chǎng)景

適用于對(duì)省略效果要求較低，多行文本響應(yīng)式截?cái)嗟那闆r

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'>這是一段很長(zhǎng)的文本</div>
</body>

示例圖片

原理講解

有 A、B、C 三個(gè)盒子，A 左浮動(dòng)，B、C 右浮動(dòng)。設(shè)置 A 盒子的高度與 B 盒子高度（或最大高度）要保持一致

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

收，大道歸簡(jiǎn)，能力封裝

凡重復(fù)的，讓它單一；凡復(fù)雜的，讓它簡(jiǎn)單。

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

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

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

效果如下：

多行文本溢出顯示省略號(hào)的方法：

在線咨詢

上一篇：HTML字間距如何設(shè)置？#html
下一篇：HTML表標(biāo)題標(biāo)簽的定義與用法

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商

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

1）單行文本溢出顯示省略號(hào)

2）多行文本溢出顯示省略號(hào)

前言

先來點(diǎn)基礎(chǔ)的，單行文本溢出省略

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

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

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

再進(jìn)階一步，多行文本溢出省略（按高度）

○ 多行文本溢出不顯示省略號(hào)

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

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

收，大道歸簡(jiǎn)，能力封裝

您的項(xiàng)目需求

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

收，大道歸簡(jiǎn)，能力封裝