乙個盒子只是顯示兩行

2022-03-09 04:42:35 字數 290 閱讀 2455

在移動端中高度無法寫死,但標題類的部分有時候是規定只顯示兩行的,設定高度是不行的,用-webkit-line-clamp屬性,需要和display:-webkit-box和-webkit-box-origent屬性結合使用。

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

text-overflow: ellipsis;

不能給盒子設定高度。

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

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

css超出兩行顯示省略號

1.css寫法只對webkit核心的瀏覽器好用,對safari瀏覽器有相容問題.demo2.css超出兩行顯示省略號 個人寫法 twolines article ref article content ref p p cover v if isshow span div div template e...

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

一行顯示否則省略號 word break break all 屬性規定自動換行的處理方法。normal 使用瀏覽器預設的換行規則。break all 允許在單詞內換行。keep all 只能在半形空格或連字元處換行。text overflow ellipsis display webkit box ...