如何控制文字溢位隱藏及單行顯示

2021-10-25 11:28:16 字數 1336 閱讀 8164

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