css 處理 單行 多行 文字溢位

1）單行溢位

前提必須有寬度

width

:300px;
whitewhite-space
: nowrap; // 文字不會換行。
overflow
: hidden;  // 溢位多餘裁剪   
text-overflow
:ellipsis; // 顯示省略符號來代表被修剪的文字。

因使用了webkit的css擴充套件屬性，該方法適用於webkit瀏覽器及移動端。

display

: -webkit-box;  // 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示  
-webkit-box-orient
: vertical;   // 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式
-webkit-line-clamp
: 3;    // 用來限制在乙個塊元素顯示的文字的行數，根據需要寫。
overflow
: hidden; // 溢位多餘裁剪

css實現單行（多行）文字溢位顯示

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

單行 多行文字溢位隱藏

單行文字超出隱藏 在這裡插入 片 overflow hidden text overflow ellipsis white space nowrap 多行文字超出隱藏 在這裡插入 片 overflow hidden 超出隱藏 text overflow ellipsis 文字溢位時顯示省略標記 di...

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

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