CSS實現單行 多行文字的溢位顯示省略號

2021-10-03 23:30:05 字數 529 閱讀 9828

overflow: hidden; 

text-overflow: ellipsis;

white-space: nowrap;

height:75px;//注意 : 高度設定為行高的整數倍,來防止剩下得文字在下方露出。

line-height: 25px;

overflow: hidden;

display: -webkit-box; //將物件作為彈性伸縮盒子模型顯示。

-webkit-box-orient: vertical; //設定或檢索伸縮盒物件的子元素的排列方式 。

-webkit-line-clamp: 3;//規定在乙個塊元素顯示的文字的行數。

效果:

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

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

css 處理 單行 多行 文字溢位

1 單行溢位 前提必須有寬度 width 300px whitewhite space nowrap 文字不會換行。overflow hidden 溢位多餘裁剪 text overflow ellipsis 顯示省略符號來代表被修剪的文字。2 多行文字溢位 因使用了webkit的css擴充套件屬性,...

CSS實現單行 多行文字溢位顯示 的總結

效果圖如下 實現方法 overflow hidden text overflow ellipsis white space nowrap 還需要加寬度width屬來相容部分瀏覽。效果圖如下 實現方法 display webkit box webkit box orient vertical webk...