伙伴們，對(duì)于省略號(hào)呢，咱們前端攻城獅的實(shí)現(xiàn)方法可就是多種多樣了，那接下來(lái)呢我就給你羅列一下如果用css書(shū)寫(xiě)這些特殊效果，來(lái)一起看看吧~~~

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

效果圖：

實(shí)現(xiàn)代碼:

HTML部分

<h3>使用css實(shí)現(xiàn)單行省略號(hào)</h3>
<div class="box1">
    <a href="#" class="a1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ipsaexplicabo quos sapiente ea error, mollitia necessitatibus animi facere rem non sed velit aperiam laboriosamdebitis. Quae deleniti doloremque nisi.
    </a>
</div>

CSS部分

h3 {
    padding-left: 10px;
    }
.a1 {
    text-decoration: none;
    color: #000;
    padding-left: 20px;
    } 
.box1 {
     height: 40px;
     line-height: 40px;
     background-image: linear-gradient(white, gray);
     box-shadow: 0 0 2px 2px rgb(148, 145, 145);
     box-sizing: border-box;
     /* 單行顯示省略號(hào) */
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     }

注:此案例為京東首頁(yè)的部分切圖，此時(shí)的省略號(hào)可以用上述代碼實(shí)現(xiàn)

2.多行顯示省略號(hào)

效果圖：

HTML部分

<h3>使用css實(shí)現(xiàn)三行之后顯示省略號(hào)</h3>
<div class="box2">
    <a href="#" class="a1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit dicta laudantium aspernatur illo id, beatae mollitia magnam, laboriosam cupiditate harum veritatis ullam delectus adipisci quasi, laborum ipsum quis est molestiae.
    </a>
</div>

CSS部分

h3 {
    padding-left: 10px;
    }
.a1 {
    text-decoration: none;
    color: #000;
    padding-left: 20px;
    } 
.box2 {
    height: 60px;
    line-height: 30px;
    background-image: linear-gradient(white, gray);
    box-shadow: 0 0 2px 2px rgb(148, 145, 145);
    overflow: hidden;
    /* 三行顯示省略號(hào) */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    }

實(shí)際案例應(yīng)用場(chǎng)景說(shuō)明:

注:此時(shí)明顯是折行后在第二行多余的部分顯示省略號(hào)，那由于內(nèi)容不固定字?jǐn)?shù)不固定，所以需要?jiǎng)討B(tài)設(shè)置，那么就應(yīng)用到了上述的多行顯示省略號(hào)的方法

3.內(nèi)容中間顯示省略號(hào)(方法一)

效果圖:

HTML部分

<h3>使用css實(shí)現(xiàn)中間顯示省略號(hào)方法一</h3>
<div class="box3">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi perferendis iste sit! Et quos aspernatur suscipit ab qui? Cumque debitis fugiat ab fugit repudiandae, vel eius error nisi minus<span></span><a href="#">全文</a>
</div>

css部分

.box3 {
        /* height: 120px; */
        line-height: 30px;
        background-image: linear-gradient(white, gray);
        box-shadow: 0 0 2px 2px rgb(148, 145, 145);
       }
.box3 span::after {
        content: '......';
       }

實(shí)際案例應(yīng)用場(chǎng)景說(shuō)明:

4.內(nèi)容中間顯示省略號(hào)(方法二)

效果圖：

HTML部分

<h3>使用css實(shí)現(xiàn)中間顯示省略號(hào)方法二</h3>
<div class="box4">
    <a href="#">
        <span class="span1" title="我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容">我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容我是左側(cè)內(nèi)容</span>
        <span class="span2" title="我是右側(cè)內(nèi)容我是右側(cè)內(nèi)容"></span>
    </a>
</div>

css部分

.box4 {
         height: 30px;
         line-height: 30px;
         background-image: linear-gradient(white, gray);
         box-shadow: 0 0 2px 2px rgb(148, 145, 145);
        }

.box4 .span1 {
        float: left;
        width: 62%;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        }

.box4 a {
        color: #000;
        }

.box4 .span2::before {
        content: attr(title);
        width: 38%;
        float: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        direction: rtl;
        }

/* 優(yōu)化兩個(gè)span中間的間距 */
.box4 {
        text-align: justify;
      }

實(shí)際案例應(yīng)用場(chǎng)景說(shuō)明:

綜上所述:以上四種方案是目前頁(yè)面中應(yīng)用較多的實(shí)現(xiàn)省略號(hào)的方法，僅代表個(gè)人觀點(diǎn)，如您有更優(yōu)的方法歡迎聯(lián)系我們。

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

前言

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

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

核心 CSS 語(yǔ)句

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

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

• 無(wú)兼容問(wè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 語(yǔ)句

• -webkit-line-clamp: 2；（用來(lái)限制在一個(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è)面，因?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)

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

短板

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

適用場(chǎng)景

• 適用于響應(yīng)式截?cái)啵嘈形谋疽绯鍪÷缘那闆r

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 語(yǔ)句

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

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

• 無(wú)兼容問(wè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 語(yǔ)句

• 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)

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

短板

• 無(wú)法識(shí)別文字的長(zhǎng)短，無(wú)論文本是否溢出范圍, 一直顯示省略號(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 語(yǔ)句

• 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)

• 無(wú)兼容問(wè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 盒子高度（或最大高度）要保持一致

1. 當(dāng)?shù)?B 盒子高度低于 A 盒子，C 盒子仍會(huì)處于 B 盒子右下方。
2. 如果 B 盒子文本過(guò)多，高度超過(guò)了 A 盒子，則 C 盒子不會(huì)停留在右下方，而是掉到了 A 盒子下。
3. 接下來(lái)對(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ù)，都提供了同類(lèi)組件的封裝，如基于 Vue 的 ViewUI Pro，或面向小程序提供組件化解決能力的 MinUI。

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

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
/*超出部分就隱藏*/
overflow:hidden;
/*不換行設(shè)定*/
white-space:nowrap;
/*超出部分的文字顯示省略號(hào)*/
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box">用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)</div>
</body>
</html>

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>可以換行，多行，超出部分顯示省略號(hào)</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
display: -webkit-box;
-webkit-box-orient: vertical;
/*2行*/
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">1.用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)</div>
<div class="box">2.用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)用css控制字?jǐn)?shù)，超出部分顯示省略號(hào)</div>
</body>
</html>