CSS實現溢出顯示省略號

伙伴們，對于省略號呢，咱們前端攻城獅的實現方法可就是多種多樣了，那接下來呢我就給你羅列一下如果用css書寫這些特殊效果，來一起看看吧~~~

1.單行文本超出顯示省略號

效果圖：

實現代碼:

HTML部分

<h3>使用css實現單行省略號</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;
     /* 單行顯示省略號 */
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     }

注:此案例為京東首頁的部分切圖，此時的省略號可以用上述代碼實現

2.多行顯示省略號

效果圖：

HTML部分

<h3>使用css實現三行之后顯示省略號</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;
    /* 三行顯示省略號 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    }

實際案例應用場景說明:

注:此時明顯是折行后在第二行多余的部分顯示省略號，那由于內容不固定字數不固定，所以需要動態設置，那么就應用到了上述的多行顯示省略號的方法

3.內容中間顯示省略號(方法一)

效果圖:

HTML部分

<h3>使用css實現中間顯示省略號方法一</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: '......';
       }

實際案例應用場景說明:

4.內容中間顯示省略號(方法二)

效果圖：

HTML部分

<h3>使用css實現中間顯示省略號方法二</h3>
<div class="box4">
    <a href="#">
        <span class="span1" title="我是左側內容我是左側內容我是左側內容">我是左側內容我是左側內容我是左側內容</span>
        <span class="span2" title="我是右側內容我是右側內容"></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;
        }

/* 優化兩個span中間的間距 */
.box4 {
        text-align: justify;
      }

實際案例應用場景說明:

綜上所述:以上四種方案是目前頁面中應用較多的實現省略號的方法，僅代表個人觀點，如您有更優的方法歡迎聯系我們。

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

前言

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

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

核心 CSS 語句

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

優點

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

短板

只支持單行文本截斷

適用場景

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

Demo

<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；（多行文本的情況下，用省略號“…”隱藏溢出范圍的文本)

優點

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

短板

兼容性一般： -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。

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

時候需要控制下文字數，不然就會溢出，頁面就會變樣不美觀。這時我們就可以用css控制字數，超出部分顯示省略號。可以不換行，超出部分顯示省略號，也可以可以換行，多行，超出部分顯示省略號。

1.不換行，超出部分顯示省略號

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

效果圖如下：

2.可以換行，多行，超出部分顯示省略號

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>可以換行，多行，超出部分顯示省略號</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控制字數，超出部分顯示省略號用css控制字數，超出部分顯示省略號</div>
<div class="box">2.用css控制字數，超出部分顯示省略號用css控制字數，超出部分顯示省略號</div>
</body>
</html>

效果圖如下：

注：此方法適用于WebKit瀏覽器及移動端。

除注明外的文章,均為來源:湯久生博客,轉載請保留本文地址！

原文地址：http://tangjiusheng.com/divcss/169.html

在線咨詢

上一篇：20個超炫的HTML5 /CSS3免費網頁設計模板
下一篇：網頁在線視頻播放代碼大全

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS實現溢出顯示省略號

1.單行文本超出顯示省略號

2.多行顯示省略號

3.內容中間顯示省略號(方法一)

4.內容中間顯示省略號(方法二)

前言

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

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

○ 純 CSS 實現方案

○ 基于 JavaScript 的實現方案

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

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

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

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

收，大道歸簡，能力封裝

您的項目需求