css文本样式处理
這里通過一些實例來演示一下，CSS3 對于文本的屬性樣式~
文本屬性包括：
代碼：
<!DOCTYPE html> <html> <head> <title>文字樣式</title> <style> .newspaper{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;}.a{color: rebeccapurple; }.b{color: hotpink;direction: rtl;}.c{letter-spacing: 10px;color: yellowgreen;}.d .big{line-height: 200%;}.e :nth-child(1){color: red;text-align: left;}.e :nth-child(2){color: red;text-align: center;}.e :nth-child(3){color: red;text-align: right;}.f :nth-child(1){color: green;text-decoration:overline;}.f :nth-child(2){color: green;text-decoration:line-through;}.f :nth-child(3){color: green;text-decoration:underline;}.f :nth-child(4){color: green;text-decoration:blink}.g{text-indent:50px;}.h{color: khaki;white-space: nowrap;}.i{color: paleturquoise;word-spacing: 10px;}.j .test{white-space:nowrap; width:12em; overflow:hidden; border:1px solid #000000;}.k{text-shadow: 5px 5px 5px #FF0000;}.m .test1{width:11em; border:1px solid #000000;word-break:hyphenate;}.m .test2{width:11em; border:1px solid #000000;word-break:break-all;} </style> </head> <body> <div class="newspaper"><div class="a">aaaaaaaaaaaaaaaaaaaaaaaaaaa123456 顏色</div><div class="b">1234hhhhhppp00000 文本方向</div><div class="c">cccccccccccc字符間距</div><div class="d"><p class="big">這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。這個段落擁有更大的行高。</p></div><div class="e"><p>文本對齊方式1</p><p>文本對齊方式2</p><p>文本對齊方式3</p></div><div class="f"><p>文本修飾1</p><p>文本修飾2</p><p>文本修飾3</p><p>文本修飾4</p></div><div class="g"><p>文本縮進--------123456789oiujhxz我，了防盜門是可麻煩兩年了男方的兩年了給付對價ffdljvnlkmlkdvlkernvkm_φ(?_?? 人丑就要多讀書(。＿ 。） ?＿學習計劃走起_φ_(．．) 寫作業(yè)</p></div><div class="h"><p>處理元素之間的空白------這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。</p></div><div class="i"><p>this is my name is you name!(letter-spacing設置字符間距，word-spacing設置單詞間距~)</p></div><div class="j" style="border:1px solid #999"><p>下面兩個 div 包含無法在框中容納的長文本。正如您所見，文本被修剪了。</p><p>這個 div 使用 "text-overflow:ellipsis" ：</p><div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div><p>這個 div 使用 "text-overflow:clip"：</p><div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div></div><div class="k">文本添加陰影！</div><div class="l"></div><div class="m"><p>規(guī)定非中日韓文本的換行規(guī)則</p><p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p><p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p></div><div class="n">nnnnnnnnnnnnnnnnnnnnnnnnnn</div><div class="o">nnnnnnnnnnnnnnnnnnnnnnnnnn</div><div class="p">nnnnnnnnnnnnnnnnnnnnnnnnnn</div><div class="q">nnnnnnnnnnnnnnnnnnnnnnnnnn</div> </div></body> </html>###效果：
總結
- 上一篇： battleblock theater怎
- 下一篇： 京东怎么分期买手机