CSS設定文字省略

槑孒發表於2024-08-25
CSS

在 CSS 中，可以使用 text-overflow、white-space 和 overflow 來配置文字省略（即當文字內容超過容器寬度時，顯示為省略號 ...）。以下是實現單行和多行文字省略的配置方法。

1. 單行文字省略

要實現單行文字省略，可以使用以下 CSS：

.ellipsis {
    white-space: nowrap;        /* 禁止文字換行 */
    overflow: hidden;           /* 隱藏超出容器的文字 */
    text-overflow: ellipsis;    /* 使用省略號表示溢位的文字 */
}

示例

<div class="ellipsis" style="width: 200px;">
    This is a long text that should be truncated with an ellipsis...
</div>

2. 多行文字省略

要實現多行文字省略，可以使用以下 CSS。注意：這種方式可能需要結合 -webkit-line-clamp，這個屬性在一些瀏覽器中可能有相容性問題。

.multiline-ellipsis {
    display: -webkit-box;              /* 必須結合 display: -webkit-box; 用於多行文字省略 */
    -webkit-box-orient: vertical;      /* 設定盒子模型的方向為垂直 */
    -webkit-line-clamp: 3;             /* 顯示的行數，超出的部分會被截斷 */
    overflow: hidden;                  /* 隱藏溢位的內容 */
    text-overflow: ellipsis;           /* 使用省略號表示溢位的文字 */
}

示例

<div class="multiline-ellipsis" style="width: 200px;">
    This is a long text that spans multiple lines but should be truncated after three lines with an ellipsis...
</div>

3. 解釋

  • white-space: nowrap;：強制文字在一行內顯示，禁止換行。
  • overflow: hidden;：隱藏溢位的部分內容。
  • text-overflow: ellipsis;：用省略號表示被截斷的文字。
  • display: -webkit-box;：配合 -webkit-line-clamp 實現多行文字省略。
  • -webkit-box-orient: vertical;：設定盒子模型的方向為垂直，配合 display: -webkit-box 使用。
  • -webkit-line-clamp: 3;：指定顯示的行數，超出部分會被省略號截斷。

4. 相容性注意

  • 多行文字省略使用的 -webkit-line-clamp 是 WebKit 私有屬性，可能在非 WebKit 核心的瀏覽器中不相容。
  • 單行文字省略的方式具有廣泛的瀏覽器支援。

5. 需要設定 width 的情況

在某些佈局中，樣式不起作用時，可能需要顯式地設定 width。

感覺給width隨便賦個值都行。

以下是一些常見情況：

情況 1: 父元素未正確定義 display: flex;

  • 如果父元素未設定為 display: flex; 或者它的直接父元素未設定為 flex 容器，flex: 1; 將不起作用。

    解決方法：
    確保父元素已定義 display: flex;。

    .parent {
    display: flex;
}

情況 2: flex-basis 與內容的寬度衝突

  • flex: 1; 中的 flex-basis 預設值為 0%，如果子元素內容寬度大於 0%，且沒有其他元素來共享空間，這可能導致 flex: 1; 看起來無效。

    解決方法：
    可以顯式設定 width 或者設定 flex-basis 為 auto 以使其考慮內容大小。

    .child {
    flex: 1;
    width: 100%; /* 或者設定 flex-basis */
}

情況 3: 父元素沒有設定尺寸

  • 如果父容器沒有一個明確的尺寸（如沒有設定 width 或 height），子元素的 flex: 1; 不會生效，因為沒有可用空間供其擴充套件。

    解決方法：
    確保父元素有一個明確的 width 或 height，否則子元素無法根據 flex: 1; 自動擴充套件。

    .parent {
    display: flex;
    height: 100vh; /* 或者 width: 100% */
}

相關文章