摘要:前言多行文本超出高度限制出現(xiàn)省略號移動端多為內(nèi)核的有擴展屬性但并不是規(guī)范中的屬性端往往要借助去實現(xiàn)這一效果,但麻煩且不是很靠譜,今天就用純來實現(xiàn)一個完全兼容的多行省略。
前言
多行文本超出高度限制出現(xiàn)省略號 , 移動端多為webkit內(nèi)核的 , 有擴展屬性-webkit-line-clamp , 但并不是CSS規(guī)范中的屬性 , PC端往往要借助js去實現(xiàn)這一效果,但麻煩且不是很靠譜,今天就用純CSS來實現(xiàn)一個完全兼容的多行省略。
正文 一、webkit內(nèi)核的實現(xiàn)-webkit-line-clamp設(shè)置塊元素包含的文本行數(shù);
display: -webkit-box設(shè)置塊元素的布局為伸縮布局;
-webkit-box-orient設(shè)置伸縮項的布局方向;
text-overflow: ellipsis;則表示超出盒子的部分使用省略號表示。
不過本文將要介紹的方法是采用CSS規(guī)范中的屬性,并結(jié)合特殊的實現(xiàn)技巧完成的。這意味著在實現(xiàn)CSS2.1規(guī)范的瀏覽器中都是可以兼容的,不將僅僅是純粹的移動端領(lǐng)域,在傳統(tǒng)的PC瀏覽器(你們懂得我指的是哪些瀏覽器)中仍是可行的。好吧,讓我們一起見識下。
一共7個步驟,最簡單的就是截斷文本,最難的部分則是讓一個元素出在其父塊的溢出時的右下方,并且當(dāng)父元素未溢出時該元素消失不可見。(代碼可直接粘貼看效果)
1、基本結(jié)構(gòu)布局最簡單的開始:當(dāng)父包含框比較小時,將子元素布局到父包含框的右下角;
HTML
1.prop2.main 這里是主題內(nèi)容,多行省略3.end
CSS
.wrap { width: 400px; height: 50px; margin: 20px 20px 50px 300px; border: 5px solid #AAA; line-height: 25px; } .prop { float: left; width: 50px; height: 50px; background: #FAF; } .main { float: right; width: 350px; background: #AFF; word-break: break-all; } .end { position: relative; float: right; width: 50px; background: #FFA; }
效果如下面幾張圖(注意黃色end的位置), 其實這個實現(xiàn)完全利用了元素浮動的基本規(guī)則。
2、定位模擬"..."我們通過創(chuàng)建一個子元素來替代將要顯示的省略號,當(dāng)本文溢出的情形下該元素顯示在正確的位置上。在接下來的實現(xiàn)中,我們創(chuàng)建一個realend元素,利用上一步驟中end元素浮動后的位置來實現(xiàn)realEnd元素的定位。
HTML
1.prop2.main 這里是要多行文本溢出省略的,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點3.endrealEnd
CSS
// 新增下面樣式即可 .realEnd { position: absolute; width: 100%; height: 25px; top: -25px; /*等于高度的負值,就是文字的行高*/ left: 350px; background: #FAA; font-size: 13px; }
效果如圖下圖
若父元素并沒有溢出,那么realend元素會出現(xiàn)在其右側(cè)(設(shè)置wrap overflow:hidden即可,下面會解決)
3、優(yōu)化定位第二步中我們針對end元素設(shè)置了相對定位,對realEnd元素設(shè)置了絕對定位。但是我們可以采用更簡單的代碼來實現(xiàn),即只使用相對定位。熟悉定位模型的同學(xué)應(yīng)該知道,相對定位的元素仍然占據(jù)文本流,同時針對元素設(shè)置偏移。這樣, 就可以去掉end元素了,僅針對realEnd元素設(shè)置相對定位。
HTML
1.prop2.main 這里是要多行文本溢出省略的,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點realEnd
CSS
// 刪除end樣式,realEnd樣式更改如下 .realEnd { float: right; position: relative; width: 50px; height: 25px; top: -25px; /*等于高度的負值,就是文字的行高*/ left: 350px; background: #FAA; font-size: 13px; }
效果如圖(黃色的end已經(jīng)沒了)
4、削窄prop元素目前,最左側(cè)的prop元素的作用在于讓realend元素在文本溢出時處在其正下方,在前幾節(jié)的示例代碼中為了直觀的演示,設(shè)置prop元素的寬度為50px,那么現(xiàn)在為了更好的模擬實際的效果,我們縮小prop元素的寬度。
CSS
// 更改部分樣式如下 .prop { float: left; width: 5px;/*縮小寬度為5px,其余屬性不變*/ height: 50px; background: #FAF; } .main { float: right; width: 400px; margin-left: -5px;/*讓main元素左移5px,這樣main元素在寬度上就完全占滿了父元素;*/ background: #AFF; word-break: break-all; } .realEnd { float: right; position: relative; width: 50px; height: 25px; top: -25px; /*等于高度的負值,就是文字的行高*/ left: 400px; /*而設(shè)置margin-left: -50px、padding-right: 5px則是為了讓realend元素的盒模型的最終寬度計算為5px。*/ margin-left: -50px; padding-right: 5px; background: #FAA; font-size: 13px; }
由于CSS規(guī)范規(guī)定padding的值不可以為負數(shù),因此只有設(shè)置margind-left為負值,且等于其寬度。這樣做的最終目的就是保證realend元素處在prop元素的下方,保證在文本溢出的情況下定位準確性:
效果圖如下
5、流式布局 + 偽元素目前,realend元素的相關(guān)屬性仍采用px度量,為了更好的擴展性,可以改用%替代。
同時,prop元素和realend元素可以采用偽元素來實現(xiàn),減少額外標簽的使用。
CSS
.mutil-line-ellipsis { width: 400px; height: 50px; margin: 20px 20px 50px 300px; border: 5px solid #AAA; line-height: 25px; /*overflow: hidden;*/ } /*相當(dāng)于之前的prop*/ .mutil-line-ellipsis:before { content: ""; float: left; width: 5px;/*縮小寬度為5px,其余屬性不變*/ height: 50px; background: #FAF; } /*相當(dāng)于之前的main*/ .mutil-line-ellipsis > :first-child { float: right; width: 100%; margin-left: -5px;/*讓main元素左移5px,這樣main元素在寬度上就完全占滿了父元素;*/ background: #AFF; word-break: break-all; } /*相當(dāng)于之前的realEnd*/ .mutil-line-ellipsis:after { content: "realEnd"; float: right; position: relative; width: 50px; height: 25px; top: -25px; /*等于高度的負值,就是文字的行高*/ left: 100%; /*而設(shè)置margin-left: -50px、padding-right: 5px則是為了讓realend元素的盒模型的最終寬度計算為5px。*/ margin-left: -50px; padding-right: 5px; background: #FAA; font-size: 13px; }
HTML
2.main 這里是要多行文本溢出省略的,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點 內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點,內(nèi)容多一點
效果和上一步一樣
6、隱藏之前的實現(xiàn)中在文本未溢出的情況下,realEnd元素會出現(xiàn)在父元素的右側(cè),正如
設(shè)置
CSS
.mutil-line-ellipsis { overflow: hidden; }7、美化
現(xiàn)在我們離完結(jié)就差一步了,即去掉各元素的背景色,并且用“...”替換文本。最后為了優(yōu)化體驗,采用漸變來隱藏“...”覆蓋的文本,(省略了一些兼容性的屬性)。
CSS
.mutil-line-ellipsis { width: 400px; height: 50px; line-height: 25px; margin: 20px 20px 50px 300px; border: 5px solid #AAA; line-height: 25px; overflow: hidden; } /*相當(dāng)于之前的prop*/ .mutil-line-ellipsis:before { content: ""; float: left; width: 5px;/*縮小寬度為5px,其余屬性不變*/ height: 50px; } /*相當(dāng)于之前的main*/ .mutil-line-ellipsis > :first-child { float: right; width: 100%; margin-left: -5px;/*讓main元素左移5px,這樣main元素在寬度上就完全占滿了父元素;*/ word-break: break-all; } /*相當(dāng)于之前的realEnd*/ .mutil-line-ellipsis:after { content: "..."; box-sizing: content-box; float: right; position: relative; width: 50px; height: 25px; top: -25px; /*等于高度的負值,就是文字的行高*/ left: 100%; /*而設(shè)置margin-left: -50px、padding-right: 5px則是為了讓realend元素的盒模型的最終寬度計算為5px。*/ margin-left: -50px; padding-right: 5px; font-size: 13px; text-align: right; background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 40px); }
效果(自己可調(diào)整省略樣式)
總結(jié)之兼容性從上文的實現(xiàn)細節(jié)來看,我們利用的技巧完全是CSS規(guī)范中的浮動+定位+盒模型寬度計算,唯一存在兼容性問題的在于無關(guān)痛癢的漸變實現(xiàn),因此可以在大多數(shù)瀏覽器下進行嘗試。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/111839.html
摘要:前端芝士樹純實現(xiàn)多行文本溢出顯示省略號使用來控制行數(shù)由于用來限制在一個塊元素顯示的文本的行數(shù)這是一個不規(guī)范的屬性,它沒有出現(xiàn)在規(guī)范草案中,為了實現(xiàn)該效果,它需要組合其他外來的屬性。 【前端芝士樹】純CSS實現(xiàn)多行文本溢出顯示省略號 使用-webkit-line-clamp來控制行數(shù) 由于-webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數(shù),這是一個不規(guī)范的屬性(u...
摘要:前言項目中我們經(jīng)常遇到這種需求,需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當(dāng)對象內(nèi)文本溢出時不顯示省略標記,而是將溢出的部分裁切掉。 前言:項目中我們經(jīng)常遇到這種需求,需要對單行、多行文本超出顯示為省略號。這篇文章主要總結(jié)了小編解決此問題的方法,有不足之處歡迎大家指正。 單行文本省略 showImg(https://segme...
摘要:前言項目中我們經(jīng)常遇到這種需求,需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當(dāng)對象內(nèi)文本溢出時不顯示省略標記,而是將溢出的部分裁切掉。 前言:項目中我們經(jīng)常遇到這種需求,需要對單行、多行文本超出顯示為省略號。這篇文章主要總結(jié)了小編解決此問題的方法,有不足之處歡迎大家指正。 單行文本省略 showImg(https://segme...
摘要:前言項目中我們經(jīng)常遇到這種需求,需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當(dāng)對象內(nèi)文本溢出時不顯示省略標記,而是將溢出的部分裁切掉。 前言:項目中我們經(jīng)常遇到這種需求,需要對單行、多行文本超出顯示為省略號。這篇文章主要總結(jié)了小編解決此問題的方法,有不足之處歡迎大家指正。 單行文本省略 showImg(https://segme...
閱讀 3316·2021-11-25 09:43
閱讀 1304·2021-11-23 09:51
閱讀 3609·2021-10-11 11:06
閱讀 3698·2021-08-31 09:41
閱讀 3597·2019-08-30 15:53
閱讀 3510·2019-08-30 15:53
閱讀 965·2019-08-30 15:43
閱讀 3307·2019-08-29 14:02