CSS ellipsis 與 padding 結合時的問題詳解

  發布時間:2019-10-17 16:00:08   作者:劉哇勇   我要評論
這篇文章主要介紹了CSS ellipsis 與 padding 結合時的問題詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

CSS 實現的文本截斷

考察如下代碼實現文本超出自動截斷的樣式代碼:

.truncate-text-4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

使用如下的 HTML 片段進行測試:

<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>

運行效果:

通過 CSS ellipsis 實現的文本截斷效果

padding 的問題

一切都很完美,直到給文本容器加上 padding 樣式后。

  .my-div {
    width: 300px;
    margin: 10px auto;
    background: #ddd;
+    padding: 30px;
  }
現在的效果

現在的效果是這樣的:

padding 破壞了文本截斷

因為 padding 占了元素內部空間,但這部分區域卻是在元素內部的,所以不會受 overflow: hidden 影響。

解決辦法

line-height

當設置的 line-height 適當時,或足夠大時,可以將 padding 的部分抵消掉以實現將多余部分擠出可見范圍的目標。

.my-div {
  width: 300px;
  margin: 10px auto;
  background: #ddd;
  padding: 30px;
+  line-height: 75px;
}

通過 line-height 修復

這種方式并不適用所有場景,因為不是所有地方都需要那么大的行高。

替換掉 padding

padding 無非是要給元素的內容與邊框間添加間隔,或是與別的元素間添加間隔。這里可以考慮其實方式來替換。

比如 margin。但如果元素有背景,比如本例中,那 margin 的試就不適用了,因為元素 margin 部分是不帶背景的。

還可用 border 代替。

.my-div {
  width: 300px;
  margin: 10px auto;
  background: #ddd;
-  padding: 30px;
+  border: 30px solid transparent;
}

使用 border 替換 padding

毫不意外,它仍然有它的局限性。就是在元素本身有自己的 border 樣式要求的時候,就會沖突了。

將邊距與內容容器分開

比較普適的方法可能就是它了,即將內容與邊距分開到兩個元素上,一個元素專門用來實現邊距,一個元素用來實現文本的截斷。這個好理解,直接看代碼:

<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>

而我們的樣式可以保持不動。

將邊距與內容容器分開

相關資源

overflow:hidden ignoring bottom padding

How can I force overflow: hidden to not use up my padding-right space

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • CSS中margin和padding的區別淺析

    在CSS中margin是指從自身邊框到另一個容器邊框之間的距離,就是容器外距離。在CSS中padding是指自身邊框到自身內部另一個容器邊框之間的距離,就是容器內距離。下面講解 pa
    2017-06-26
  • 關于CSS Padding那些你意想不到的用法示例

    這篇文章給大家總結一些關于CSS中Padding屬性不常用但很實用的用法,具有一定參考價值,有需要的可以來參考學習。
    2016-08-31
  • css中padding和margin的異同點介紹

    本文從語法結構、可能取的值、瀏覽器兼容問題等方面為大家介紹下padding和margin的異同點另附截圖,有想學習的朋友可以參考下哈,希望對大家有所幫助
    2013-07-28
  • CSS中屬性Padding的參數個數定義及值的設置

    Padding屬性在css中的應用已是司空見慣,習以為常了,不過還有許多朋友一直弄不明白padding屬性的值的設置,本文整理了一些padding屬性相關知識,感興趣的朋友可以了解下,
    2013-02-06
  • CSS padding屬性定義邊內補白

    邊框的里面可以有一層邊內補白(padding),邊內補白定義了邊框與邊框里面內容的距離. 邊內補白分為上邊內補白(top),下邊內補白(bottom),左邊內補白(left),右邊內補白(right)
    2009-07-15
  • CSS3教程:background-clip和background-origin-CSS教程-網頁制作-網頁

    原文:http://www.planabc.net/2008/04/14/background-clip_background-origin/ background-clip 和 background-origin 是 CSS3 中新加的 background module 屬性,用來
    2008-10-17

最新評論

福建体育彩票时时彩11