CSS中多行文字溢位省略

2021-09-05 10:12:18 字數 556 閱讀 9839

overflow:hidden; //超出的文字隱藏

text-overflow:ellipsis; //溢位用省略號顯示

white-space:nowrap; //溢位不換行,只能顯示一行

這個只是用適用於單行文字溢位情況,之前處理多行文字的話需要js來支援。

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

-webkit-box-orient:vertical; //從上到下垂直排列子元素(設定伸縮盒子的子元素排列方式)

-webkit-line-clamp:2; //需要組合上面兩個屬性,引數是顯示的行數。

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

前端 單行文字溢位省略與多行文字溢位省略

text ellipsis示例 效果 multiline ellipsis示例 慶曆四年春,滕子京謫守巴陵郡。越明年,政通人和,百廢具興,乃重修岳陽樓,增其舊制,刻唐賢今人詩賦於其上,屬予作文以記之。予觀夫巴陵勝狀,在洞庭一湖。銜遠山,吞長江,浩浩湯湯,橫無際涯,朝暉夕陰,氣象萬千,此則岳陽樓之大觀...

css文字溢位省略

在做響應式網頁的時候,我們要想在不同尺寸的裝置下保證布局不會錯亂,就需要對文字的長度進行限定。在介紹下面的方法之前,我們先對所有的例子進行基礎的樣式設定 基礎設定 div.box 設定好啦,現在我們開始表演 1.單行溢位隱藏顯示 box text box1 目錄結構清晰是首要目標,至於命名只要能達到...

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

單行實現 css部分 overflow hidden text overflow ellipsis white space nowrap white space 設定如何處理元素內的空白 值為nowrap 文字不會換行,文字會在同一行上繼續,直到遇到 標籤為止。效果如下 多行實現 css部分 dis...