CSS設定文字一行或者兩行顯示,多餘部分顯示省略號

2021-09-29 15:09:41 字數 841 閱讀 6495

一行顯示否則省略號

word-break: break-all;

/*屬性規定自動換行的處理方法。normal(使用瀏覽器預設的換行規則。),break-all(允許在單詞內換行。),keep-all(只能在半形空格或連字元處換行。)*/

text-overflow: ellipsis;

display: -webkit-box;

/** 物件作為伸縮盒子模型顯示 **/

-webkit-box-orient: vertical;

/** 設定或檢索伸縮盒物件的子元素的排列方式 **/

-webkit-line-clamp: 1;

/** 顯示的行數 **/

overflow: hidden;

/** 隱藏超出的內容 **/

兩行顯示否則省略號

word-break: break-all;

/*屬性規定自動換行的處理方法。normal(使用瀏覽器預設的換行規則。),break-all(允許在單詞內換行。),keep-all(只能在半形空格或連字元處換行。)*/

text-overflow: ellipsis;

display: -webkit-box;

/** 物件作為伸縮盒子模型顯示 **/

-webkit-box-orient: vertical;

/** 設定或檢索伸縮盒物件的子元素的排列方式 **/

-webkit-line-clamp: 2;

/** 顯示的行數 **/

overflow: hidden;

/** 隱藏超出的內容 **/

文字只顯示一行,和文字只顯示兩行的問題

在我們設定樣式的時候,不可避免的涉及到內容只出現一行或只出現自己想要的行數。1.首先說一行的問題。如果內容超出,還會看到現在的內容嗎?噠噠噠噠噠 outer 詳解 overflow hidden 這個就不用多說了,超出的部分隱藏。還可以用於清除浮動 不建議使用 text overflow ellip...

css文字超出隱藏顯示省略號 實現一行兩行多行

一行省略實現,用css overflow hidden 超出文字隱藏 white space nowrap 溢位不換行 text overflow ellipsis 溢位省略號顯示屬性瀏覽器原生支援,各大瀏覽器相容性好,缺點就是只支援單行文字截斷,並不支援多行文字擷取。適用場景 單行文字截斷最簡單實...

css動畫讓文字一行一行逐漸顯示

這幾天在做乙個年終總結的活動,需要將顯示的內容以動畫的形式逐漸顯示,而且還要使用輪播的效果顯示好幾頁,每頁內容都不同 其實簡單的css就可以實現,但是css 太長,就寫了個迴圈用js實現啦我是在vue的基礎上寫的,1 輪播可以使用外掛程式swiper,使用可以參考 或者我下篇文章介紹 2 每頁輪播頁...