CSS ellipsis 與 padding 結(jié)合時(shí)的問(wèn)題詳解
我要評(píng)論CSS 實(shí)現(xiàn)的文本截?cái)?/strong>
考察如下代碼實(shí)現(xiàn)文本超出自動(dòng)截?cái)嗟臉邮酱a：
.truncate-text-4 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
使用如下的 HTML 片段進(jìn)行測(cè)試：
<style>
.my-div {
width: 300px;
margin: 10px auto;
background: #ddd;
}
</style>
<div class="my-div truncate-text-4">
How Not To Shuffle - The Knuth Fisher-Yates Algorithm. Written by Mike James.
Thursday, 16 February 2017. Sometimes simple algorithms are just wrong. In
this case shuffling an .... In other words as the array is scanned the element
under
</div>
運(yùn)行效果：
通過(guò) CSS ellipsis 實(shí)現(xiàn)的文本截?cái)嘈Ч?/p>
padding 的問(wèn)題
一切都很完美，直到給文本容器加上 padding 樣式后。
.my-div {
width: 300px;
margin: 10px auto;
background: #ddd;
+ padding: 30px;
}
現(xiàn)在的效果
現(xiàn)在的效果是這樣的：
padding 破壞了文本截?cái)?/p>
因?yàn)?padding 占了元素內(nèi)部空間，但這部分區(qū)域卻是在元素內(nèi)部的，所以不會(huì)受 overflow: hidden 影響。
解決辦法
line-height
當(dāng)設(shè)置的 line-height 適當(dāng)時(shí)，或足夠大時(shí)，可以將 padding 的部分抵消掉以實(shí)現(xiàn)將多余部分?jǐn)D出可見(jiàn)范圍的目標(biāo)。
.my-div {
width: 300px;
margin: 10px auto;
background: #ddd;
padding: 30px;
+ line-height: 75px;
}
通過(guò) line-height 修復(fù)
這種方式并不適用所有場(chǎng)景，因?yàn)椴皇撬械胤蕉夹枰敲创蟮男懈摺?/p>
替換掉 padding
padding 無(wú)非是要給元素的內(nèi)容與邊框間添加間隔，或是與別的元素間添加間隔。這里可以考慮其實(shí)方式來(lái)替換。
比如 margin。但如果元素有背景，比如本例中，那 margin 的試就不適用了，因?yàn)樵?margin 部分是不帶背景的。
還可用 border 代替。
.my-div {
width: 300px;
margin: 10px auto;
background: #ddd;
- padding: 30px;
+ border: 30px solid transparent;
}
使用 border 替換 padding
毫不意外，它仍然有它的局限性。就是在元素本身有自己的 border 樣式要求的時(shí)候，就會(huì)沖突了。
將邊距與內(nèi)容容器分開(kāi)
比較普適的方法可能就是它了，即將內(nèi)容與邊距分開(kāi)到兩個(gè)元素上，一個(gè)元素專(zhuān)門(mén)用來(lái)實(shí)現(xiàn)邊距，一個(gè)元素用來(lái)實(shí)現(xiàn)文本的截?cái)唷＿@個(gè)好理解，直接看代碼：
<div className="my-div">
<div className="truncate-text-4">
How Not To Shuffle - The Knuth Fisher-Yates Algorithm. Written by Mike
James. Thursday, 16 February 2017. Sometimes simple algorithms are just
wrong. In this case shuffling an .... In other words as the array is scanned
the element under
</div>
</div>
而我們的樣式可以保持不動(dòng)。
將邊距與內(nèi)容容器分開(kāi)
相關(guān)資源
overflow:hidden ignoring bottom padding
How can I force overflow: hidden to not use up my padding-right space
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在CSS中margin是指從自身邊框到另一個(gè)容器邊框之間的距離，就是容器外距離。在CSS中padding是指自身邊框到自身內(nèi)部另一個(gè)容器邊框之間的距離，就是容器內(nèi)距離。下面講解 pa2017-06-26關(guān)于CSS Padding那些你意想不到的用法示例
這篇文章給大家總結(jié)一些關(guān)于CSS中Padding屬性不常用但很實(shí)用的用法，具有一定參考價(jià)值，有需要的可以來(lái)參考學(xué)習(xí)。2016-08-31css中padding和margin的異同點(diǎn)介紹
本文從語(yǔ)法結(jié)構(gòu)、可能取的值、瀏覽器兼容問(wèn)題等方面為大家介紹下padding和margin的異同點(diǎn)另附截圖，有想學(xué)習(xí)的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-28CSS中屬性Padding的參數(shù)個(gè)數(shù)定義及值的設(shè)置
Padding屬性在css中的應(yīng)用已是司空見(jiàn)慣，習(xí)以為常了,不過(guò)還有許多朋友一直弄不明白padding屬性的值的設(shè)置，本文整理了一些padding屬性相關(guān)知識(shí)，感興趣的朋友可以了解下，2013-02-06- 邊框的里面可以有一層邊內(nèi)補(bǔ)白(padding),邊內(nèi)補(bǔ)白定義了邊框與邊框里面內(nèi)容的距離. 邊內(nèi)補(bǔ)白分為上邊內(nèi)補(bǔ)白(top),下邊內(nèi)補(bǔ)白(bottom),左邊內(nèi)補(bǔ)白(left),右邊內(nèi)補(bǔ)白(right)2009-07-15
CSS3教程：background-clip和background-origin-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)
原文：http://www.planabc.net/2008/04/14/background-clip_background-origin/ background-clip 和 background-origin 是 CSS3 中新加的 background module 屬性，用來(lái)2008-10-17
