容易混淆的几个换行属性
- word-break:break-all；/* 单词内换行 */
- word-wrap:break-word;/* 以单词/网址/换行 */
- white-space:pre-wrap;/* 保留空白 */
- white-space:nowrap; /* 不换行 */
<!DOCTYPE html> <html> <head> <style> .wrap{ width:11em; border:1px solid #000000; } p.test1{ word-wrap:break-word; } p.test2{ word-break:break-all; } p.test3{ white-space:pre-wrap; } p.test4{ white-space:nowrap; } </style> </head> <body> <p class="wrap test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p> <p class="wrap test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p> <p class="wrap test3"> <b>注释：</b> 目前 Opera 不支持 word-break 属性。 </p> <p class="wrap test4"> <b>注释：</b> 目前 Opera 不支持 word-break 属性。 </p> </body> </html>
效果图
