css 超出部分用省略號顯示

2021-10-25 06:28:23 字數 601 閱讀 7840

說明

text-overflow：用於多行文字的情況下，用省略號「…」隱藏超出範圍的文字 。

display: -webkit-box：將物件作為彈性伸縮盒子模型顯示，是必須結合的屬性。

-webkit-box-orient：設定或檢索伸縮盒物件的子元素的排列方式，是必須結合的屬性 ，

一、文字顯示一行，超出部分用省略號顯示

white-space


: nowrap;


overflow


: hidden;


text-overflow


: ellipsis;
二、控制文字顯示兩行或三行，超出部分用省略號顯示

overflow


: hidden;


text-overflow


: ellipsis;


display


: -webkit-box;


-webkit-line-clamp


: 2;（行數）


-webkit-box-orient


: vertical;

css超出部分用省略號替代

一 單行 實現單行文字的溢位顯示省略號使用text overflow ellipsis屬性，但需要配合使用另外兩個屬性使用才能達到效果。如下 overflow hidden text overflow ellipsis white space nowrap 效果 二 多行 不考慮相容性，適用於web...

文字超出部分用是省略號顯示

1 文字超出部分用是省略號顯示 text overflow ellipsis overflow hidden white space nowrap whit space屬性 normal 預設。空白會被瀏覽器忽略。pre空白會被瀏覽器保留。其行為方式類似 html 中的標籤。nowrap 文字不會換...

CSS文字超出部分顯示省略號

overflow hidden 超出的部分隱藏起來 text overflow ellipsis 超出文字以省略號 white space nowrap 不換行 overflow hidden 超出的部分隱藏起來 text overflow ellipsis 超出文字以省略號 display web...