純css實現單行」擷取「

2021-09-06 12:23:50 字數 1143 閱讀 7165

>純css實現單行」擷取「

title

>

<

style

type

="text/css"

>

*.zxx_text_overflow_4

.zxx_text_overflow_4 .text_con

.zxx_text_overflow_4 .text_dotted

style

>

head

>

<

body

>

<

div

class

="zxx_text_overflow_4"

>

<

div

class

="text_con"

>這是一段比較長的文字,用來測試是否文字溢位時會用省略號顯示。

div>

<

div

class

="text_dotted"

>…

div>

div>

<

div

style

="background:red; height:40px;"

>嘎嘎嘎

div>

body

>

html

>

簡要說明:當文字內容足夠長 時就把隱藏在上面的省略號層給擠下來了。關鍵就是點點點所在div層的高度的絕對值要比其margin的絕對值大那麼一點點。 如果您不習慣用em做單位,直接換作px就可以了,效果是一樣的。

css實現擷取顯示

以前對css沒有了解的時候經常使用字串擷取來實現文字加省略號的展現形式,今天對css進行了一下研究,發現css也提供了擷取顯示的功能 css 如下 文章模組列表2fdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfdsfds 文章模組列表2fdsfdsfdsfdsfdsfdsfdsf...

純css實現箭頭

很久之前收集的,忘記出處了。1.梯形 當元素寬 高和邊框的寬相近 等 時,改變某一邊的顏色可以看到乙個梯形 border 10px solid 000 border left color f00 width 10px height 10px 2.三角形 當元素寬 高為零,且其他邊為透明顏色時,可以形...

文字超出擷取(單行 多行)

width 100px overflow hidden white space nowrap text overflow ellipsis width 100px overflow hidden display webkit box webkit box orient vertical webkit...