CSS 2行文字時正常顯示，超過2行顯示更多

在做頁面時，ui有乙個這樣的需求，當描述中不超過2行文字時，則正常顯示在頁面上，超過2行的時候，顯示更多

想法是這樣的

1、不能根據字數的多少判斷行數，因為電腦螢幕大小不一樣，故一行文字的字數也不同；

2、也不能用 -webkit-line-clamp: 2；因為這樣「更多」無法顯示，被隱藏的文字也無法顯示

所以，用js搞定是比較好的。下面是實現思路

1、首先，假設2行文字的正常高度是40px。在請求描述內容成功之後，去獲取描述內容div的高度，如果高度大於40px，則顯示更多按鈕，並摺疊多餘內容；

2、具體過程如下：

="comment-abstract-layer"
>
class
="content-abstract-layer"
ref=
"contentabstractdom"
:style=
"" v-html=
"videodetail.summary"
>
<
/div>
"isshowmorebtn"
class
="more text-right" @click=
"isopen = !isopen"
>
="fold-icon vertical-align-middle"
:src=
"imageurl"
/>
<
/div>
<
/div>
data()
,},computed:
,imageurl()
},getvideodetail()
).then
(res =
>).
catch
(err =
>);
});}
,async docountheightlimit()
}

.comment-abstract-layer

.more
}}

CSS文字超過2行省略號（ ）顯示

基礎屬性 只能做到超出一行部分省略號顯示 width 200px 寬度overflow hidden 超出文字隱藏 white space nowrap 不換行，只顯示一行 text overflow ellipsis 超出部分省略號顯示 css3屬性 可做到超出 n 行部分省略號顯示，行數可自定義...

css 文字超出2行顯示省略號

首先，要知道css的三條屬性。overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 這三個是css的基礎屬性，需要記得。但是第三條屬性，只能顯示一行，不能用在這裡，那麼如果顯示多行呢？css3...

CSS（2） 文字樣式 盒模型

1.1 color 文字顏色 屬性值 三種色值表示法都可以使用 1 color b30000 十六進製制表示法 2 color rgb 255,0,0 rgb 3 color red 單詞表示法1.2 font style 設定文字是否傾斜 預設值 normal 正常 傾斜 oblique 普通傾斜...