如何實現溢位文字省略號

wmui發表於2022-03-01

背景

有時候為了頁面美觀，對於比較長的標題或簡介內容，會希望溢位的內容用省略號代替。這麼做雖然降低了使用者體驗，但是視覺上會比較整潔。

方案

單行文字溢位省略

  <p class="txt">這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介</p>

  <style>
   .txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </style>

多行文字溢位省略

  <p class="txt2">這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介這是一段簡介</p>

<style>
  .txt2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 設定溢位行數 */
  }
</style>

20220223192711

如果在專案中使用了scss，可以編寫一個mixin來處理

 @mixin ellipsis($line: 1) {
    overflow: hidden;
    text-overflow: ellipsis;

    @if $line==1 {
        white-space: nowrap;
        word-wrap: normal;
    }

    @else {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $line;
    }
}

注意： 這是一個非標準屬性，但是得到了各大瀏覽器的支援（除了IE）

參考文件1：https://developer.mozilla.org...

如何實現溢位文字省略號首發於聚享小站，如果對您有幫助，不要忘記點贊支援一下呦?

相關文章