html內容
class
="text"
>
適合場景:文字內容較多,確定文字內容一定會超過容器的,那麼選擇這種方式不錯。但文字未超出行的情況下也會出現省略號,可結合js優化該方法。
p>
新增css樣式
.text
頁面效果如下:
屬性值描述
visible
預設值。內容不會被修剪,會呈現在元素框之外。
hidden
內容會被修剪,並且其餘內容是不可見的。
scroll
內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto
如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit
規定應該從父元素繼承 overflow 屬性的值。
屬性值描述
clip
修剪文字
ellipsis
顯示省略符號來代表被修剪的文字。
string
使用給定的字串來代表被修剪的文字。
>
這是文字加粗的1b
>
>
這是文字加粗的2strong
>
>
這個是文字放大的big
>
>
這個是文字縮小的small
>
>
這個是文字斜體的1em
>
>
這個是文字斜體的2i
>
>
這個文字包含
>
下標sub
>
span
>
>
這個文字包含
>
上標sup
>
span
>
>
這個是文字下劃線del
>
>
這個是刪除文字效果ins
>
>
如何使用 pre 標籤
對空行和 空格
進行控制
pre>
>
dir=
"rtl"
>
該段落文字從右到左顯示bdo
>
p>
單行 多行文字溢位隱藏
單行文字超出隱藏 在這裡插入 片 overflow hidden text overflow ellipsis white space nowrap 多行文字超出隱藏 在這裡插入 片 overflow hidden 超出隱藏 text overflow ellipsis 文字溢位時顯示省略標記 di...
單行溢位隱藏沒生效 css實現文字溢位隱藏
css實現文字溢位顯示省略號 在做響應式網頁的時候,我們要想在不同尺寸的裝置下保證布局不會錯亂,就需要對文字的長度進行限定。基礎設定 在介紹下面的方法之前,我們先對所有的例子進行基礎的樣式設定 基礎設定 div.box width 100px height 100px border 1px soli...
單行 多行文字溢位隱藏顯示省略號
classname classname 其中多行文字中,因為我們使用了webkit的擴充套件屬性,該方法適用於核心為webkit的瀏覽器 注意 webkit line clamp是用來限制乙個塊元素顯示的文字行數。為了實現對應的效果,它需要結合其他的webkit屬性。常見的有 1 display w...