怎么在css中實(shí)現(xiàn)多行省略

本篇文章給大家分享的是有關(guān)怎么在css中實(shí)現(xiàn)多行省略，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

10年積累的成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有吳川免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

使用-webkit-line-clamp

對(duì)多行文本的容器應(yīng)用如下樣式

div {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

除了 -webkit-line-clamp 其他屬性固定不變，主要是將對(duì)象作為彈性伸縮盒子模型顯示，并設(shè)置伸縮盒對(duì)象的子元素的排列方式。

而 -webkit-line-clamp 是用來控制多少行進(jìn)行省略

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

  • 瀏覽器原生支持的省略行為，樣式看起來很舒服

  • 簡單方便使用

缺點(diǎn)：

看屬性的前綴就知道，這是 webkit 內(nèi)核的瀏覽器支持的，兼容性不是廣泛。

 使用場景

如果你只針對(duì)webkit內(nèi)核瀏覽器或者移動(dòng)端（移動(dòng)端瀏覽器多數(shù)是webkit內(nèi)核），那么使用該方案是最好的了。

利用絕對(duì)定位

這個(gè)方案其實(shí)很好理解的，首先我們對(duì)于一個(gè)裝內(nèi)容的容器右邊預(yù)留一個(gè)空間用來放省略號(hào)，用 padding-right: 1em; 來預(yù)留空間，為啥是1em呢，一個(gè)省略號(hào)差不多就是1em啦，用em單位是為了響應(yīng)字體大小。

用絕對(duì)定位把省略號(hào)定位在這個(gè)預(yù)留的空間右下角。

html

<div class="wrap">內(nèi)容</div>

css

.wrap3 {
    position: relative;
    padding-right: 1em;
    /*max-height是line-height的幾倍，想最多顯示多少行就幾倍*/
    max-height: 3.6em;
    line-height: 1.2em;
    text-align: justify;
    overflow: hidden;
}

.wrap3:before {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '...';
}

效果（多內(nèi)容時(shí)）：

怎么在css中實(shí)現(xiàn)多行省略

這樣的話，省略號(hào)永遠(yuǎn)都會(huì)存在的。所以要解決這個(gè)問題，我們用一個(gè)跟背景顏色一樣的方塊遮住省略號(hào)，那么關(guān)鍵點(diǎn)就是，怎么知道何時(shí)要遮住，何時(shí)不遮住呢？

思路： 用于擋住省略號(hào)的方塊也是絕對(duì)定位，靠右定為， right: 0 ，但是 bottom 值就不要設(shè)置了，如果不設(shè)置的話，該方塊會(huì)跟著文本內(nèi)容的實(shí)際高度移動(dòng)，而不是 max-height 的高度。這樣的話，當(dāng)不需要省略時(shí)（即不超過 max-height ）時(shí)，就剛好是 bottom: 0 的情況，就會(huì)擋住省略號(hào)。當(dāng)要進(jìn)行省略時(shí)（即超過 max-height ）就會(huì)擋不住省略號(hào)了，它自己也會(huì)被 overflow: hidden 給隱藏掉了。

所以最終方案是：

html

<div class="wrap">內(nèi)容</div>

css

.wrap {
    position: relative;
    /*line-height和height要相互配合，顯示多少行就省略，就是line-height多少倍數(shù)*/
    line-height: 1.2em;
    max-height: 3.6em;
    /*此屬性看需求來判斷是否設(shè)置，因?yàn)樵O(shè)置了padding-right，多騰出了點(diǎn)位置，該值一般為padding-right的值的負(fù)值*/
    /*margin-left: -1em;*/
    /*此值寫死成1em就好，因?yàn)槭÷蕴?hào)大概就是占用1em的空間*/
    padding-right: 1em;
    text-align: justify;
    overflow: hidden;
}

.wrap:before {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '...';
}

.wrap:after {
    position: absolute;
    right: 0;
    /*寬高寫死1em就好，因?yàn)槭÷蕴?hào)大概就是占用1em的空間，用來遮擋住省略號(hào)，也基本上跟wrap的padding-right一致*/
    width: 1em;
    /*與wrap的行高實(shí)際值保持一致*/
    height: 1.2em;
    content: '';
    /*要跟所在背景顏色一致才能遮擋住省略號(hào)后覺得沒異樣*/
    background-color: #fff;
}

效果：

怎么在css中實(shí)現(xiàn)多行省略 

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

  • 兼容性好，各大瀏覽器支持

  • 自適應(yīng)高度，不用寫死高度，設(shè)定超過多少行才需要進(jìn)行省略顯示

  • 自適應(yīng)寬度

  • 自適應(yīng)字體大小，字體大小不會(huì)影響到原本的需求，即要求多少行省略就多少行才省略

缺點(diǎn)

  • 文字右邊會(huì)故意留空一些位置給省略號(hào)放置

  • 需要考慮所在的背景顏色，因?yàn)閍fter偽類要用背景顏色來遮擋住省略號(hào)

 利用float布局

這個(gè)方案對(duì)于基礎(chǔ)知識(shí)不扎實(shí)的童鞋們，可能不太好理解，如果僅是想找個(gè)解決方案不想知道原理的話，可以直接去里看

在說該方案之前，要先理解這么一個(gè)現(xiàn)象：

有這么一段html

<div class="wrap">
    <div class="left">左浮動(dòng)</div>
    <div class="right1">右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1右浮動(dòng)1</div>
    <div class="right2">右浮動(dòng)2</div>
</div>

應(yīng)用這么一段樣式

.wrap {
	height: 100px;
}
.left {
	float: left;
	width: 60px;
	height: 100%;
	background: pink;
}
.right1 {
	float: right;
	/*占滿wrap除left剩余寬度*/
	width: calc(100% - 60px);
	background: #95d9f8;
}
.right2 {
	float: right;
	background: yellow;
}

正常情況下會(huì)顯示成這樣，這也是大家一般所能想象的預(yù)期情況：

怎么在css中實(shí)現(xiàn)多行省略

出現(xiàn)這個(gè)正?，F(xiàn)象的條件是：

  • .right1 的高度不超過 .left 的高度（即內(nèi)容少）

  • .right2 的寬度少于 .right1 的寬度

好了，這個(gè)情況大家理解了吧。那么接下來，我們對(duì) .right1 的內(nèi)容增多至超出左浮動(dòng)的高度，會(huì)發(fā)生接下來的一幕

怎么在css中實(shí)現(xiàn)多行省略

右浮動(dòng)2卡在左下角了。

要問我為什么會(huì)這樣？額...看來你對(duì)float的基礎(chǔ)知識(shí)不扎實(shí)呀，建議夯實(shí)一下基礎(chǔ)知識(shí)，其實(shí)我也解釋不了，我只知道這是float的一個(gè)正常表現(xiàn)。

出現(xiàn)這個(gè)現(xiàn)象的條件是：

  • .right1 的高度超過 .left 的高度（即內(nèi)容多）

  • .right2 的寬度少于或等于 .left 的寬度

 知識(shí)轉(zhuǎn)化成需求實(shí)現(xiàn)

在理解了上述兩個(gè)情景后，我們應(yīng)該怎么利用這些知識(shí)來匹配對(duì)應(yīng)的需求呢？

假設(shè)右浮動(dòng)1的文本內(nèi)容就是我們要進(jìn)行多行省略的內(nèi)容，右浮動(dòng)2的內(nèi)容就是省略號(hào)（...）。這樣當(dāng)內(nèi)容少時(shí)，省略號(hào)就是上述的第一個(gè)情況，內(nèi)容多的時(shí)候就是第二個(gè)情況。

這種動(dòng)態(tài)變化，是不是像“文本少時(shí)不省略，文本多時(shí)進(jìn)行省略”這種需求變化呢。在這個(gè)基礎(chǔ)上，我們要解決的是 在第一種情況右浮動(dòng)2隱藏掉，第二種情況下右浮動(dòng)2出現(xiàn)在 .wrap 的右下角，超出高度的內(nèi)容隱藏掉。

要解決上述問題，只要使用 position: relative; 進(jìn)行相對(duì)定位即可。 .wrap 父容器應(yīng)用 overflow: hidden; 。 第一種情況下，定位到父容器外部，就隱藏掉了。而第二種情況，就定位到父容器右下角。

好了，現(xiàn)在該解決方案的焦點(diǎn)，就放在如何準(zhǔn)確定位的問題上了（下一小節(jié)）。在處理定位問題前，先把目前掌握的情況轉(zhuǎn)化為實(shí)際的需求代碼：

<!--把左浮動(dòng)和右浮動(dòng)2采用偽類元素替換掉實(shí)際標(biāo)簽-->
<div class="wrap">
    <div class="text">右浮動(dòng)1</div>
</div>
.wrap {
    height: 100px;
    /*line-height用來控制最多顯示多少行文本*/
    line-height: 20px;
    overflow: hidden;
}
.wrap:before {
    float: left;
    /*要大于或等于after元素寬度*/
    width: 1.5em;
    height: 100%;
    content: '';
}
.text {
    float: right;
    /*用負(fù)值的marginLeft來避免由before產(chǎn)生的空白空間*/
    /*因?yàn)閷?shí)際需求上你的父容器里不可能左邊是一片空白吧*/
    margin-left: -1.5em;
    /*既然采用了負(fù)值marginLeft，那么文本容器寬度就可以100%占滿父容器寬度了*/
    width: 100%;
}
.wrap:after {
    float: right;
    /*一般三個(gè)點(diǎn)就差不多1em寬，用em作單位能自適應(yīng)字體大小*/
    width: 1em;
    content: '...';
}

如果你這時(shí)候好奇，為什么 .text 都設(shè)置了 width: 100%; 了，內(nèi)容多時(shí) :after 還是會(huì)卡在 :before 底下呢？是因?yàn)榧词?.text 設(shè)置了 margin-left: -1.5em; ，但是實(shí)際上并不會(huì)影響到原本的文檔流情況，原本該是怎樣的就是怎樣，設(shè)置了負(fù)值的margin，影響的只是 .text 自身的呈現(xiàn)樣式。

如何定位

解決定位問題是基于上小節(jié)的代碼基礎(chǔ)上。目前暴露的問題有：

  1. 內(nèi)容少即不需要做省略時(shí)，省略號(hào)顯示出來了

  2. 內(nèi)容多即需要省略時(shí)，省略號(hào)隱藏了

先解決第二個(gè)問題

怎么在css中實(shí)現(xiàn)多行省略

思路：要把這個(gè) :after 向右移動(dòng)到 .wrap 右邊，向上移動(dòng)到最后一行的位置。

用 position: relative; 來控制的話， top 值好取，取 .wrap 的 line-height 實(shí)際值一樣，取負(fù)值就好了。關(guān)鍵是left值，怎么取才能剛好在右下角呈現(xiàn)出來。

如果你能明確知道 .text 的寬度的話（如100px），其實(shí)設(shè)置 left: 100px; 即可，但是這樣的話只能針對(duì)固定寬的情況，不能自適應(yīng)寬度。要想實(shí)現(xiàn)自適應(yīng)，left的值取百分比就行了，那么到底是百分之多少呢？這是糾結(jié)的。索性就取100%吧，會(huì)發(fā)現(xiàn)會(huì)移出到父容器外。

怎么在css中實(shí)現(xiàn)多行省略

那要?jiǎng)偤贸霈F(xiàn)在右下角的話，省略號(hào)的初始位置就必須要在 .wrap 的左側(cè)，緊挨著 .wrap ，才能 left: 100% 后出現(xiàn)在右下角。

現(xiàn)在問題就變成如何讓 :after 剛好出現(xiàn)在 .wrap 的左側(cè)了。 以下代碼對(duì)于基礎(chǔ)不扎實(shí)的人，可能有些難理解了（新增部分在注釋處）：

.wrap:after {
    float: right;
    /*因?yàn)橄旅嬖O(shè)置了margin，所以這里的寬度值大小沒有要求*/
    width: 1em;
    content: '...';
    
    /*這兩個(gè)屬性是設(shè)置緊挨著.wrap左側(cè)*/
    /*此值要跟自身寬度一樣，取負(fù)值*/
    margin-left: -1em;
    /*此值要跟before寬度一樣*/
    padding-right: 1.5em;
    
    /*這是定位省略號(hào)的位置*/
    position: relative;
    left: 100%;
    /*與父元素wrap的行高實(shí)際值一樣，取負(fù)值*/
    top: -20px;
}

關(guān)于設(shè)置margin和padding值那里，如果你能理解就最好了，不能理解的話，我盡量解釋一下，其實(shí)這也真不好說。

首先是應(yīng)用 margin-left: 1em; 的時(shí)候，由于 :after 的寬度比 :before 的要小，所以按照原本的float布局的話，在一行里

怎么在css中實(shí)現(xiàn)多行省略

粉紅色為左浮動(dòng)，藍(lán)色紅色為右浮動(dòng)，如果紅色的寬度不斷增大至除粉紅色剩余空間，由于一行的空間不夠，藍(lán)色會(huì)被擠到換行右浮動(dòng)了。但是如果設(shè)置藍(lán)色的margin-left為本身寬度的負(fù)值，那么這時(shí)候一行的空間還是有位置給它的，就變成了如下這樣了

怎么在css中實(shí)現(xiàn)多行省略

按照上述原理，設(shè)置了 margin-left: 1em; 后， :after 就變回到父容器的第一行上了，緊挨著父容器左側(cè)。但是我們不能讓它回到第一行上呀，所以設(shè)置 padding-right: 1.5em; 讓它實(shí)際占的空間變大到第一行容不下它，就變回到原本的卡在 :before 下的位置，只是padding值讓它移動(dòng)到左側(cè)了

怎么在css中實(shí)現(xiàn)多行省略

好了我解釋完了，能不能看懂，只能看你的造化了哈哈。

值得留意的是，上面代碼里關(guān)于width的注釋寫著“因?yàn)橄旅嬖O(shè)置了margin，所以這里的寬度值大小沒有要求”，之前都要求小于等于 :before 寬度，但是現(xiàn)在由于采用margin-left負(fù)值抵消了本身的寬度，所以這個(gè)要求轉(zhuǎn)化對(duì) padding-right 了，這時(shí)是等于

小結(jié)

到目前位置，所有問題都解決了。針對(duì)上述所有討論的問題，總結(jié)為以下代碼（具體優(yōu)化有注釋說明）：

css樣式

.wrap {
    /*需要定高*/
    height: 100px;
    /*用來設(shè)置顯示多少行才省略，值一般為wrap的height值/行數(shù)求得，但是這個(gè)行數(shù)會(huì)受到字體大小的限制*/
    /*字體太大了，設(shè)置顯示很多行也會(huì)很丑，都擠一塊了，所以這個(gè)實(shí)際值，要看具體需求和實(shí)踐*/
    line-height: 25px;
    /*加上此屬性顯示效果更佳，就算部分瀏覽器不支持也影響不大*/
    text-align: justify;
    overflow: hidden;
}

.wrap:before {
    float: left;
    /*這個(gè)值可以隨意設(shè)定，不論單位還是什么*/
    width: 1em;
    height: 100%;
    content: '';
}

.wrap:after {
    float: right;
    /*大小隨意，設(shè)置em單位最好，可隨字體大小變化而自適應(yīng)*/
    /*如果要采用以下漸變效果，那么這個(gè)值要大于before里的width值效果會(huì)比較好點(diǎn)*/
	/*值越大，漸變的效果越明顯影響的范圍越大。*/
    width: 2.5em;
    /*與父元素wrap的行高實(shí)際px值一樣*/
    height: 25px;
    /*此值要跟自身寬度一樣，取負(fù)值*/
    margin-left: -2.5em;
    /*此值要跟before寬度一樣*/
    padding-right: 1em;
    content: '...';
    text-align: right;
    /*這里開始利用在float布局的基礎(chǔ)上進(jìn)行定位移動(dòng)了*/
    position: relative;
    /*與父元素wrap的行高實(shí)際值一樣，取負(fù)值*/
    top: -25px;
    left: 100%;
    /*設(shè)置漸變效果是為了省略號(hào)和內(nèi)容銜接得自然點(diǎn)，沒那么突兀，要注意要跟文字所在的背景的顏色搭配（把white替換成背景色）*/
    background: #fff;
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}

.wrap .text {
    float: right;
    /*該值要等于wrap:before的width值*/
    margin-left: -1em;
    width: 100%;
}

html文件：

<div class="wrap">
    <span class="text">
        示例2： 散發(fā)設(shè)解決看手機(jī)啦開發(fā)交
    </span>
</div>

效果：

怎么在css中實(shí)現(xiàn)多行省略

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

  • 兼容性好，滿足不是webkit內(nèi)核的瀏覽器都能支持

  • 自適應(yīng)寬度

缺點(diǎn)

  • 固定高度，不能自適應(yīng)高度，因此顯示多少行還要受字體大小限制

  • 需要為文字包裹一個(gè)標(biāo)簽用以設(shè)置樣式

  • 從讀樣式代碼上來看，理解起來不是很好理解

  • 如果省略號(hào)所在元素不用漸變色背景，偶爾會(huì)截?cái)嗟猛回＃绻脻u變色背景，要注意與文字所在的背景下的顏色搭配

以上就是怎么在css中實(shí)現(xiàn)多行省略，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文題目：怎么在css中實(shí)現(xiàn)多行省略
網(wǎng)站URL：http://muchs.cn/article16/pcoogg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、做網(wǎng)站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化