怎么在CSS3中使用line-clamp屬性控制文本行數(shù)

發(fā)布時(shí)間：2021-03-20 15:18:00 來(lái)源：億速云閱讀：249 作者：Leah 欄目：web開(kāi)發(fā)

本篇文章給大家分享的是有關(guān)怎么在CSS3中使用line-clamp屬性控制文本行數(shù)，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

說(shuō)明：限制在一個(gè)塊元素顯示的文本的行數(shù)。

-webkit-line-clamp 是一個(gè) 不規(guī)范的屬性（unsupported WebKit property），它沒(méi)有出現(xiàn)在 CSS 規(guī)范草案中。

為了實(shí)現(xiàn)該效果，它需要組合其他外來(lái)的WebKit屬性。常見(jiàn)結(jié)合屬性：

display: -webkit-box; 必須結(jié)合的屬性，將對(duì)象作為彈性伸縮盒子模型顯示。
-webkit-box-orient 必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式。
text-overflow，可以用來(lái)多行文本的情況下，用省略號(hào)“...”隱藏超出范圍的文本。

今天接到優(yōu)化需求，帖子列表里的內(nèi)容要求縮略至3行，并帶‘…’省略號(hào)

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>cline-clamp</title>
    <style>    
            .box{
                width: 200px;
                height: 300px;
                border:1px solid black;
            }
            p{
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                  -webkit-line-clamp: 4;            /*設(shè)置p元素最大4行，父元素需填寫(xiě)寬度才明顯*/
                  text-overflow: ellipsis;
                  overflow: hidden;
                 /* autoprefixer: off */
                 -webkit-box-orient: vertical;
                  /* autoprefixer: on */
                  /*因?yàn)榇a環(huán)境的關(guān)系-webkit-box-orient被過(guò)濾掉了 autoprefixer 這個(gè)關(guān)鍵字可以免除被過(guò)濾的動(dòng)作*/
　　　　　　　　　　word-wrap:break-word;
　　　　　　　　　　word-break:break-all;
} </style> 
</head> 
<body> 
<div class="box"> 
    <p> static：對(duì)象遵循常規(guī)流。top，right，bottom，left等屬性不會(huì)被應(yīng)用。 relative： 對(duì)象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過(guò)top，right，bottom，left屬性進(jìn)行偏移時(shí)不影響常規(guī)流中的任何元素。 absolute：對(duì)象脫離常規(guī)流，使用top，right，bottom，left等屬性進(jìn)行絕對(duì)定位，
    </p> 
</div> 
</body> 
</html>

效果如下：

怎么在CSS3中使用line-clamp屬性控制文本行數(shù)

如果你標(biāo)簽內(nèi)的是英文，英文是不會(huì)自動(dòng)換行的，所以你需要讓他自動(dòng)換行添加如下代碼即可：

word-wrap:break-word;
word-break:break-all;

以上就是怎么在CSS3中使用line-clamp屬性控制文本行數(shù)，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

怎么在CSS3中使用line-clamp屬性控制文本行數(shù)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽