常见的文本格式处理主要是对齐方式及字体大小颜色等等。CSS3中主要是添加了字体阴影以及对换行和溢出的处理。相对来看，换行是一个比较棘手的问题，由于实际文章中多以单词呈现，各个浏览器的兼容也不尽相同，部分甚至无法识别 word-wrap 的属性值，所以如果无法达到效果时我们还是得另辟蹊径。

好了下面简单看下 我的测试样式代码吧

 
  
  1. <style type="text/css"> 
  2. <!-- 
  3. .word-wraps { width:300px; border:1px solid #999999;padding:5px;margin:10px;} 
  4. .div1 {word-wrap:normal; } 
  5. .div2 {word-wrap:break-word; } 
  6. .text-overflows{ overflow:hidden; width:300px; white-space:nowrap; border:1px solid #999999;padding:5px;margin:10px;} 
  7. .div3  {text-overflow:clip; } 
  8. .div4  {text-overflow:ellipsis; } 
  9. .text-shadows{  width:300px; white-space:nowrap; border:1px solid #999999;padding:5px;margin:10px;} 
  10. .div5  {text-shadow:5px 1px 6px #000; } 
  11. .div6  {text-shadow:0 0 5px #f00; } 
  12. --> 
  13. </style> 
  14. <div class="word-wraps div1"> 
  15. wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
  16. </div> 
  17. <div class="word-wraps div2"> 
  18. wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
  19. </div> 
  20. <div class="text-overflows div3"> 
  21. textoverflo wstextoverflowstextoverflowstextoverflowstextoverflows 
  22. </div> 
  23. <div class="text-overflows div4"> 
  24. textoverflowste xtoverflowstextoverflowstextoverflowstextoverflows 
  25. </div> 
  26. <div class="text-shadows div5"> 
  27. text shadow 
  28. </div> 
  29. <div class="text-shadows div6"> 
  30. text shadow 
  31. </div> 
 
  
 
   
     字符串换行中（word-wrap） 
    
 
    
   
     normal：控制连续文本换行。 
    
   
     break-word：内容将在边界内换行。如果需要，词内换行（word-break）也会发生。 
    
  
 
  
至于溢出处理用的就比较少了
 
  
 
   
     clip：不显示省略标记（...），而是简单的裁切。 
    
   
     ellipsis：当对象内文本溢出时显示省略标记（...） 
    
  
 
  
简单说下文字阴影效果吧，
 
  
.div5  {text-shadow:5px 1px 6px #000; }
 
  
可以看出有4个取值，个人测试理解来看，参数分别为 偏移顶部距离，偏移左边距离，扩散范围，阴影颜色。
 
  
顺便贴下代码效果图吧
 
  
 
  
先记到这边吧 :-)