怎么用純CSS實(shí)現(xiàn)多行文字截?cái)?/h1>

小編給大家分享一下怎么用純CSS實(shí)現(xiàn)多行文字截?cái)?，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的孟津網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

單行文本截?cái)?text-overflow

文本溢出我們經(jīng)常用到的應(yīng)該就是 text-overflow: ellipsis 了，相信大家也很熟悉，只需輕松幾行代碼就可以實(shí)現(xiàn)單行文本截?cái)唷?/p>

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

實(shí)現(xiàn)效果：demo 地址

屬性瀏覽器原生支持，各大瀏覽器兼容性好，缺點(diǎn)就是只支持單行文本截?cái)?，并不支持多行文本截取?/p>

適用場(chǎng)景：?jiǎn)涡形淖纸財(cái)嘧詈?jiǎn)單實(shí)現(xiàn)，效果最好，放心使用。

如果是多行文字截取效果，實(shí)現(xiàn)起來(lái)就沒(méi)有那么輕松。

-webkit-line-clamp 實(shí)現(xiàn)

先介紹第一種方式，就是通過(guò) -webkit-line-clamp 屬性實(shí)現(xiàn)。具體的方式如下：

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

它需要和 display、-webkit-box-orient 和 overflow 結(jié)合使用：

• display: -webkit-box; 必須結(jié)合的屬性，將對(duì)象作為彈性伸縮盒子模型顯示。

• -webkit-box-orient; 必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式

• text-overflow: ellipsis; 可選屬性，可以用來(lái)多行文本的情況下，用省略號(hào)“…”隱藏超出范圍的文本。

實(shí)現(xiàn)效果：demo 地址

從效果上來(lái)看，它的優(yōu)點(diǎn)有：

1. 響應(yīng)式截?cái)啵鶕?jù)不同寬度做出調(diào)整

2. 文本超出范圍才顯示省略號(hào)，否則不顯示省略號(hào)

3. 瀏覽器原生實(shí)現(xiàn)，所以省略號(hào)位置顯示剛好

但是缺點(diǎn)也是很直接，因?yàn)?-webkit-line-clamp 是一個(gè)不規(guī)范的屬性，它沒(méi)有出現(xiàn)在 CSS 規(guī)范草案中。也就是說(shuō)只有 webkit 內(nèi)核的瀏覽器才支持這個(gè)屬性，像 Firefox, IE 瀏覽器統(tǒng)統(tǒng)都不支持這個(gè)屬性，瀏覽器兼容性不好。

使用場(chǎng)景：多用于移動(dòng)端頁(yè)面，因?yàn)橐苿?dòng)設(shè)備瀏覽器更多是基于 webkit 內(nèi)核，除了兼容性不好，實(shí)現(xiàn)截?cái)嗟男Ч诲e(cuò)。

定位元素實(shí)現(xiàn)多行文本截?cái)?/h3>

另外還有一種靠譜簡(jiǎn)單的做法就是設(shè)置相對(duì)定位的容器高度，用包含省略號(hào)(…)的元素模擬實(shí)現(xiàn)，實(shí)現(xiàn)方式如下：

p {
    position: relative;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    
    /* 為了展示效果更好 */
    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);
}

實(shí)現(xiàn)原理很好理解，就是通過(guò)偽元素絕對(duì)定位到行尾并遮住文字，再通過(guò) overflow: hidden 隱藏多余文字。

實(shí)現(xiàn)效果：demo 地址

從實(shí)現(xiàn)效果來(lái)看，它所具備的優(yōu)點(diǎn)：

1. 兼容性好，對(duì)各大主流瀏覽器有好的支持

2. 響應(yīng)式截?cái)?，根?jù)不同寬度做出調(diào)整

但是它無(wú)法識(shí)別文字的長(zhǎng)短，即文本超出范圍才顯示省略號(hào)，否則不顯示省略號(hào)。還有因?yàn)槭俏覀內(nèi)藶榈卦谖淖帜┪蔡砑右粋€(gè)省略號(hào)效果，就會(huì)導(dǎo)致它跟文字其實(shí)沒(méi)有貼合的很緊密，遇到這種情況可以通過(guò)添加 word-break: break-all; 使一個(gè)單詞能夠在換行時(shí)進(jìn)行拆分。

適合場(chǎng)景：文字內(nèi)容較多，確定文字內(nèi)容一定會(huì)超過(guò)容器的，那么選擇這種方式不錯(cuò)。

float 特性實(shí)現(xiàn)多行文本截?cái)?/h3>

回到一開(kāi)始我要做的內(nèi)容是多行標(biāo)題文字截取效果，顯然是無(wú)法控制標(biāo)題的長(zhǎng)度的，顯然是無(wú)法使用上述的方式?；氐绞虑榈谋举|(zhì)來(lái)看：我們希望 CSS 能夠有一種屬性，能夠在文字溢出的情況下顯示省略號(hào)，不溢出時(shí)不顯示省略號(hào)。(兩種形式，兩種效果)

正當(dāng)我以為 CSS 已經(jīng)無(wú)能為力，只能通過(guò) JS 去實(shí)現(xiàn)的時(shí)候，后來(lái)看到了一個(gè)方法非常巧妙，而且能夠滿足上述提到的所有準(zhǔn)則，下面我就介紹如何通過(guò) float 特性實(shí)現(xiàn)多行文本截?cái)嘈Ч?/p>

基本原理：

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi.