css實現單行與多行的多餘文字顯示省略號的解決方案

2021-10-06 12:42:35 字數 541 閱讀 2230

設定文字只顯示一行,多餘文字顯示省略號

/**

解決思路:

1.設定inline-block:將物件呈現為inline物件,但是物件的內容作為block物件呈現

2.設定寬度固定

3.設定文字不換行,單行顯示

4.超出部分內容隱藏

5.顯示省略號"..."

*/.data-text

設定文字顯示n行,多餘文字顯示省略號(只適合於webkit核心的瀏覽器)

/**

思路: 1.將物件作為彈性伸縮盒子模型顯示

2.設定寬度固定

3.允許文字換行

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

5.不規範的屬性(unsupported webkit property),它沒有出現在 css 規範草案中,需要組合display與-webkit-box-orient屬性,表示允許顯示的行數,溢位用省略號顯示

6. 超出的文字隱藏

*/.data-text

css實現文字單行,多行縮略方法

hidden 超出內容隱藏 white space nowrap 文字不換行 text overflow ellipsis 文字超出內容用 代替 webkit box 建立盒子模型 webkit line clamp 2 規定顯示的 行數 autoprefixer off 參考其他資料時,說這個會在...

css 實現單行 多行文字顯示

1.單行顯示文字,超出顯示省略號,很容易實現 需要加寬度width屬來相容部分瀏覽 width 200px overflow hidden text overflow ellipsis white space nowrap 2.多行文字顯示,限制行數,超出顯示省略號,如下實現 width 200px...

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

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