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

2021-09-25 08:21:04 字數 847 閱讀 9316

: hidden; //超出內容隱藏

white-space

: nowrap; //文字不換行

text-overflow

: ellipsis; //文字超出內容用(...)代替

: -webkit-box; //建立盒子模型

-webkit-line-clamp

: 2; //規定顯示的**行數

/*! autoprefixer: off **/ //參考其他資料時,說這個會在**環境下被忽略,雖然我沒遇到,但是還是把解決方法加上去

-webkit-box-orient

: vertical; //autoprefixer 這個關鍵字可以免除被過濾的動作

文章參考1:

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...

css 實現文字省略號 單行多行

在做移動端的專案時經常會遇到文字過長,塊級元素寬度不夠,造成折行的問題,產品會要求說根據寬度展示,超出部分用點號代替 做這種效果的時候會遇到單行展示和多行展示 單行示例 ellipsis single overflow hidden text overflow ellipsis white spac...