css超出兩行顯示省略號

2021-09-25 08:21:04 字數 790 閱讀 5333

1. css寫法只對webkit核心的瀏覽器好用, 對safari瀏覽器有相容問題

.demo
2. css超出兩行顯示省略號(個人寫法)

="twolines"

>

="article" ref=

"article"

>

="content" ref=

"p">

}<

/p>

="cover" v-if=

"isshow"

>

...<

/span>

<

/div>

<

/div>

<

/template>

export

default},

mounted()

, methods:},

// 獲取元素的長、寬、高等屬性

getboundingclientrect

(el);}

}}<

/script>

"scss" scoped>

// 用了**的 flexible.min.js rem布局

@function

rem($px)

.twolines

// 省略號樣式需要根據自己的具體字型大小進行調整

.cover }}

<

/style>

ps: 在這裡只是個人的寫法而已.

css 超出兩行省略號,超出一行省略號

參考 超出一行省略 p 超出2行省略 p 注 兩行注釋必須要!因為 webpack打包後 webkit box orient會被移除,autoprefixer會自動移除老式過時的 所以需要新增注釋關閉autoprefixer。如果有清除注釋的外掛程式,將該外掛程式設為false,否則不生效。auto...

css 文字強制兩行超出就顯示省略號

1.強制一行的情況很簡單 overflow hidden 超出的隱藏 text overflow ellipsis 省略號 white space nowrap 強制一行顯示 2.如果要強制兩行的話,得用到css3的知識 overflow hidden text overflow ellipsis ...

css 文字兩行顯示,超出省略號表示

重點 text overflow ellipsis 只對display inline 起作用 例子 我說說打瞌睡黨風建設打火機說說色兒ab 一行 white space nowrap text overflow ellipsis overflow hidden word break break al...