css 限制文字單行或多行顯示 超出省略的實現方法

2021-09-28 16:32:22 字數 327 閱讀 4509

overflow: hidden; //屬性規定當內容溢位元素框時發生的事情 超出區域隱藏

white-space: nowrap; //屬性設定如何處理元素內的空白 nowrap規定段落中的文字不進行換行

text-overflow: ellipsis; //屬性規定當文字溢位包含元素時發生的事情。 ellipsis 顯示省略符號來代表被修剪的文字。

overflow:hidden;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2; //要顯示的行數

css 實現單行 多行文字顯示

1.單行顯示文字,超出顯示省略號,很容易實現 需要加寬度width屬來相容部分瀏覽 width 200px overflow hidden text overflow ellipsis white space nowrap 2.多行文字顯示,限制行數,超出顯示省略號,如下實現 width 200px...

css 文字超出隱藏顯示省略號(單行或多行)

單行的時候 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行倆行或以上時 overflow hidden text overflow ellipsis 溢位用省略號顯示 display w...

css實現單行(多行)文字溢位顯示

overflow hidden text overflow ellipsis white space nowrap 當然還需要加寬度width屬來相容部分瀏覽。以上為單行文字溢位 以下為多行文字溢位 display webkit box webkit box orient vertical webk...