標籤：type css 超出 set height 換行 總結 自動 ref
代碼：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .head{ margin: 0 0 0 100px; } .container{ margin: 0 0 0 100px; } .container div{ width: 230px; height: 200px; border: 1px solid red; padding: 20px; } .d{ } .d1{ word-wrap: normal; } .d2{ word-wrap: break-word; } </style></head><body> <div class="head"> <h1>word-wrap 文本換行</h1> <h2>首頁<a href="index.html"></a></h2> </div> <div class="container"> <h2>預設normal</h2> <div class = ‘d‘> 阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang sunlikesunlikesunlikesunlikesunlikesunlikesunlikesunlike sunlike sunlike sunlike sunlike sunlike sunlike sunlike sunlike </div> <h2>word-wrap: normal;</h2> <div class = ‘d1‘> 阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang sunlikesunlikesunlikesunlikesunlikesunlikesunlikesunlike sunlike sunlike sunlike sunlike sunlike sunlike sunlike sunlike </div> <h2>word-wrap: break-word;</h2> <div class = ‘d2‘> 阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang阿理WangWang sunlikesunlikesunlikesunlikesunlikesunlikesunlikesunlike sunlike sunlike sunlike sunlike sunlike sunlike sunlike sunlike </div> </div></body></html>
效果1：
總結1：預設情況下，word-wrap的值為normal，中文字元自動換行，英文單詞不斷行
效果2：
總結2：設定word-wrap的值為normal時，中文字元自動換行，英文單詞不會截斷來換行，超出本分直接溢出
效果3：
總結3：設定word-wrap值為break-word時，中文自動換行，英文單詞或字元截斷換行
CSS3----word-wrap（單詞換行）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
