css3--文字效果
生活随笔
收集整理的這篇文章主要介紹了
css3--文字效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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文本溢出屬性指定應向用戶如何顯示溢出內容
<!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; /*超出文本的區域隱藏掉*/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：默認
ellipsis:文本溢出顯示省略號
text-overflow: '>>'：只在火狐瀏覽器下有效
?
?
如果某個單詞太長，不適合在一個區域內，它擴展到外面：
CSS3中，自動換行屬性允許您強制文本換行 - 即使這意味著分裂它中間的一個字：
<!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>效果如下：
沒加換行之前效果如下：
?
?
CSS3 單詞拆分換行屬性指定換行規則：
<!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是沿用瀏覽器默認的換行方式，因此“Ooops too”后面空出了一段空白，右圖word-break的break-all是改變瀏覽器默認的換行方式，讓瀏覽器無視半角空格，直接根據容器尺寸換行，因此遇到長單詞時，直接斷詞換行。效果上看word-break: break-all;比word-wrap: break-word;更節省頁面空間。轉載于:https://www.cnblogs.com/qjuly/p/9028213.html
總結
以上是生活随笔為你收集整理的css3--文字效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ReactNative 常见红屏黄屏及终
- 下一篇： 魔兽世界怀旧服60级法师装备