文字只有一行的時候
overflow
: hidden;
text-overflow
: ellipsis;
white-space
: nowrap;
2.1 屬性說明
display: -webkit-box: 將物件作為彈性伸縮盒子模型顯示
text-overflow: ellipsis: 溢位部分用省略號代替
-webkit-line-clamp: 用來限制在乙個塊元素顯示的文字的行數
-webkit-box-orient: vertical: 設定或檢索伸縮盒物件的子元素的排列方式
overflow
: hidden;
/* 將物件作為彈性伸縮盒子模型顯示; */
display
: -webkit-box;
/* 溢位部分用省略號代替 */
/* autoprefixer: off */
text-overflow
: ellipsis;
/* 設定文字顯示兩行 */
-webkit-line-clamp
: 2;
/* 從上到下排列子元素; */
-webkit-box-orient
: vertical;
CSS文字超出部分顯示省略號
overflow hidden 超出的部分隱藏起來 text overflow ellipsis 超出文字以省略號 white space nowrap 不換行 overflow hidden 超出的部分隱藏起來 text overflow ellipsis 超出文字以省略號 display web...
超出部分以省略號展示
不做前端很久了，今天從重構師那裡了解到css3已經可以實現很多以往必須通過js才能實現的效果，如漸變，陰影，自動截斷文字展示省略號等等強大效果，而且這些功能日漸成熟，已經大量用於生產環境。h5真的日漸成熟了，得惡補下了。以下分享實現指定文字超出部分以省略號展示的demo text1 text2 st...
CSS控制文字，超出部分顯示省略號
pstyle width 300px overflow hidden white space nowrap text overflow ellipsis 如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來，當然還需要加寬度width屬來相容部分瀏覽。...