html 中的 pre 標簽默認是不會換行的，即使聲明了 word-wrap 和 word-break 屬性也沒有效果；div 標簽可以很方便的換行，不會把頁面撐破。因為這個原因，很多網站在顯示代碼的時候使用 div 來作為容器。使用 div 標簽裝載代碼有個弊端，就是冗余內容太多，換行，制表符，空格等都需要轉換，自然源代碼的體積也大了不少。若一定要使用 div 標簽，也可以通過 white-space 來控制 div 中內容顯示的樣式，此舉也是可以的。
本人認為，在源代碼中使用 pre 標簽作為代碼容器是首選，后期前端再用其他的 javascript 代碼高亮插件美化渲染，那又另當別論。使用 css 將 pre 中內容換行的樣式如下，測試發現效果還不錯。
<style>
pre{
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* mozilla, since 1999 */
white-space: -pre-wrap; /* opera 4-6 */
white-space: -o-pre-wrap; /* opera 7 */
word-wrap: break-word; /* internet explorer 5.5+ */
overflow: auto;
word-break: break-all;
word-wrap: break-word;
}
</style>
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
