在開發中可能會遇到連續英文字符或數字超出容器邊界的問題,如
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <style type="text/css"> .ch{ width:150px; height:1OOpx; border:1px solid blue; margin-top:5px; } .en{ width:150px; height:1OOpx; border:1px solid blue; margin-top:5px; } </style> </head> <body> <div class="ch">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈。</div> <div class="en">Because I'm a programmer, bug fixing is a common practice.3.1415926579blblblblblblblblblblblb</div> </body> </html>
效果圖:
可以看到,正常的中文和英文單詞是可以正常換行的,為了解決后面的連續數字或英文字符溢出的現象,可以給en類加上word-wrap: break-word;樣式
.en{ width:150px; height:1OOpx; border:1px solid blue; margin-top:5px; word-wrap: break-word; }
效果圖:
end ^_*`