日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

css 文本超出部分顯示省略號

作者:Vincentzyc 更新時間: 2022-02-13 編程語言
/* 必須固定寬度 */
.textover {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* 可用于flex布局自適應寬度 */
.textover1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.textover2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.textover3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

注意!!!

上面的 textover1 ,textover2 ,textover3 有時候可能無效,加上 white-space: pre-line; 或者 white-space: pre-wrap; 即可;例如:

.textover2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: pre-line;
}

white-space:

描述
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 < pre > 標簽。
nowrap 文本不會換行,文本會在在同一行上繼續,直到遇到 < br > 標簽為止。
pre-wrap 保留空白符序列,但是正常地進行換行。
pre-line 合并空白符序列,但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。

原文鏈接:https://blog.csdn.net/zzzyyc/article/details/100989874

欄目分類
最近更新