CSS中text overflow的運用

2021-03-31 08:56:30 字數 1141 閱讀 2612

在我們編寫bs的應用程式中,有時我們想將資料庫中的資料以**方式顯示出來,可是裡面的資料長度不一致。為了美觀,很多的**以省略號的方式顯示內容。我看過很多的**都是自己先取出相同長度的資料,然後再加省略號。其實在css中text-overflow就可以解決這個問題。

語法:text-overflow :clip |ellipsis

取值:

clip:預設值。不顯示省略標記(...),而是簡單的裁切

ellipsis:當物件內文字溢位時顯示省略標記(...)

說明:

設定或檢索是否使用乙個省略標記(...)標示物件內文字的溢位。

這個屬性僅僅作用於水平內聯方向的,普通的西方文字的溢位。內聯溢位發生在行內的文字超出可用寬度卻沒有換行機會的時候。

要強制溢位發生並且應用ellipsis值,作者必須設定物件的

white-space 屬性值為nowrap

假如沒有換行機會(例如,物件容器的寬度是狹窄的,而內有很長的沒有合理斷行的文字),沒有應用nowrap也有可能溢位。

為了使ellipsis值被應用,此屬性必須被設定到具有不可視區域的物件。最好的選擇是設定

overflow 屬性為hidden。設定

overflow 屬性為scroll或者auto時,此屬性也會應用。但是會有滾動條出現。

通過選擇省略標記,隱藏的文字可以被選擇。當選擇發生時,省略標記會隱藏而被文字替換。

此屬性為在dhtml中製作省略標記提供了高效的方法。

此屬性對於currentstyle物件而言是唯讀的。對於其他物件而言是可讀寫的。

對應的指令碼特性為textoverflow

可以自己試一下,是不是也會出現省略號

css布局樣式屬性 text overflow

當文字過長,需縮略顯示時,使用css屬性 text overflow 即可滿足需求 關鍵字 text overflow ellipsis 語法 text overflow clip ellipsis clip 預設值 不顯示省略標記 而是簡單的裁切.ellipsis 當物件內文字溢位時顯示省略標記 ...

CSS 關於css中的border

曾經一直以為html中的border是直角的,直到有一天 test效果如下 突然有一種被欺騙了的感覺。我們可以選擇理解乙個border為兩個三角形再加乙個矩形。如上所示。繪製小尾巴 當對乙個角應用圓角樣式,如果這個角相鄰的兩個border乙個有定義而乙個無定義,那麼繪製的結果就是由粗到細的 小尾巴了...

CSS中引入CSS樣式的方法

html宣告標籤 定義和用法 宣告必須是html文件的第一行,位於標籤之前。宣告不是html標籤 他是指示web瀏覽器關於頁面使用哪個html版本進行編寫的指令 在html4.0中,宣告引用dtd,因為html4.01基於sgml。dtd規定了標記語言的則 這樣瀏覽器才能正確的呈現內容。html5不...