HTML 中的 PRE 標(biāo)簽?zāi)J(rèn)是不會換行的，即使聲明了 word-wrap 和 word-break 屬性也沒有效果；DIV 標(biāo)簽可以很方便的換行，不會把頁面撐破。因為這個原因，很多網(wǎng)站在顯示代碼的時候使用 DIV 來作為容器。使用 DIV 標(biāo)簽裝載代碼有個弊端，就是冗余內(nèi)容太多，換行，制表符，空格等都需要轉(zhuǎn)換，自然源代碼的體積也大了不少。若一定要使用 DIV 標(biāo)簽，也可以通過 white-space 來控制 DIV 中內(nèi)容顯示的樣式，此舉也是可以的。
本人認(rèn)為，在源代碼中使用 PRE 標(biāo)簽作為代碼容器是首選，后期前端再用其他的 JavaScript 代碼高亮插件美化渲染，那又另當(dāng)別論。使用 CSS 將 PRE 中內(nèi)容換行的樣式如下，測試發(fā)現(xiàn)效果還不錯。
<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技術(shù)專欄
公眾號
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試