css3--文字效果
生活随笔
收集整理的這篇文章主要介紹了
css3--文字效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
text-shadow
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3文本</title> <style type="text/css">* {margin: 0;padding: 0;}h1 {text-shadow: 5px 5px 5px red; /*x軸,y軸,模糊程度,顏色*/} </style> </head> <body><h1>Marvel Comics</h1> </body> </html>效果如下：
?
?
CSS3文本溢出屬性指定應(yīng)向用戶(hù)如何顯示溢出內(nèi)容
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3文本效果</title> <style type="text/css">* {margin: 0;padding: 0;}div.test {width: 12em;white-space: nowrap; /*文本顯示在一行*/overflow: hidden; /*超出文本的區(qū)域隱藏掉*/border: 1px solid #000;} </style> </head> <body><div class="test" style="text-overflow: ellipsis;">This is some long text that will not fit in the box</div><div class="test">This is some long text that will fit in the box</div><div class="test" style="text-overflow: '>>'">This is some long text that will fit in the box</div> </body> </html>效果如下：
clip：默認(rèn)
ellipsis:文本溢出顯示省略號(hào)
text-overflow: '>>'：只在火狐瀏覽器下有效
?
?
如果某個(gè)單詞太長(zhǎng)，不適合在一個(gè)區(qū)域內(nèi)，它擴(kuò)展到外面：
CSS3中，自動(dòng)換行屬性允許您強(qiáng)制文本換行 - 即使這意味著分裂它中間的一個(gè)字：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css3文本效果</title> <style type="text/css">* {margin: 0;padding: 0;}.test {width: 11em;border: 1px solid #000;word-wrap: break-word; /*換行*/} </style> </head> <body><p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> </body> </html>效果如下：
沒(méi)加換行之前效果如下：
?
?
CSS3 單詞拆分換行屬性指定換行規(guī)則：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本效果</title> <style> p.test1 {width:9em; border:1px solid #000000;word-break:keep-all; }p.test2 {width:9em; border:1px solid #000000;word-break:break-all; } </style> </head> <body><p class="test1"> This paragraph contains some text. This line will-break-at-hyphenates.</p> <p class="test2"> This paragraph contains some text: The lines will break at any character.</p><p><b>注意:</b> word-break 屬性不兼容 Opera.</p></body> </html>效果如下：
word-wrap的break-word是沿用瀏覽器默認(rèn)的換行方式，因此“Ooops too”后面空出了一段空白，右圖word-break的break-all是改變?yōu)g覽器默認(rèn)的換行方式，讓瀏覽器無(wú)視半角空格，直接根據(jù)容器尺寸換行，因此遇到長(zhǎng)單詞時(shí)，直接斷詞換行。效果上看word-break: break-all;比word-wrap: break-word;更節(jié)省頁(yè)面空間。轉(zhuǎn)載于:https://www.cnblogs.com/qjuly/p/9028213.html
總結(jié)
以上是生活随笔為你收集整理的css3--文字效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ReactNative 常见红屏黄屏及终
- 下一篇： 魔兽世界怀旧服60级法师装备