文字單行省略號 多行出現省略號

2021-09-02 22:52:52 字數 500 閱讀 9177

第一種僅支援單行省略:

width:value;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

第二種支援多行省略:

width:value;

overflow : hidden;

text-overflow: ellipsis;

/* display:box主要是控制父容器裡面子元素的排列方式 */

display: -webkit-box;

/* 實現限制文字顯示多行,多餘的用... */

-webkit-line-clamp: 2;

/* 屬性規定框的子元素應該被水平或垂直排列。 */

-webkit-box-orient: vertical;

css多行省略號和單行省略號

單行溢位,超出部分顯示.或者擷取。前提必須有寬度 陌生人,我也為你祝福 願你有乙個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海,春暖花開 div body html 陌生人,我也為你祝福 願你有乙個燦爛的前程 願你有情人終成眷屬 願你在塵世獲得幸福 我只願面朝大海,春暖花開 d...

css 文字超出省略號,單行省略號和多行省略號

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title html,body width 1000px padding 50px 30px margin 50px auto b...

文字超出多行省略號顯示方法

眾所周知,文字超出一行是大家很普遍使用的乙個方法 overflow hidden text overflow ellipsis white space nowrap width 100px 設定乙個寬度 但是有的時候需求是超出第二行或第n行的時候就有點尷尬了,上述 並不能實現,怎麼辦呢,請看下段 o...