1、處理空白
文本過長，在容器內顯示不下的時候，是否要換行
屬性 ：white-space : normal / nowrap
normal : 採用瀏覽器預設設定
nowrap : 不換行
2、文本溢出
溢出後的處理方式,若是想隱藏溢出的內容，可以考慮使用該屬性。
注意：該屬性必須與 overflow:hidden 聯用
屬性: text-overflow
取值:
1、clip ，裁減，攔腰截斷
2、ellipsis，通過 ... （省略符號）來表示未顯示的內容
例如：
<!DOCTYPE html ><head> <title>文字格式設定</title> <meta charset="utf-8" /> <style> p{ width:150px;height:50px;border:1px solid black;overflow:hidden;}#d1{ white-space:normal; text-overflow:ellipsis;}#d2{ white-space:nowrap; text-overflow:clip;}#d3{ white-space:nowrap; text-overflow:ellipsis;} </style></head><body> <p id="d1">longlonglonglonglonglonglonglonglonglong無法在框中容納</p><br/> <p id="d2">longlonglonglonglonglonglonglonglonglong無法在框中容納</p><br/> <p id="d3">longlonglonglonglonglonglonglonglonglong無法在框中容納</p></body></html>二、換行
注意：只對英文有效
1、長單詞換行
word-wrap :
normal : 預設，採用瀏覽器預設形式，不破壞單詞結構
break-word : 破壞單詞的結構
2、文本換行
word-break:
取值：
normal：
break-all : 破壞單詞結構進行換行
keep-all : 在半形狀態下的空格下進行換行
<!DOCTYPE html ><head> <title>文字格式設定</title> <meta charset="utf-8" /> <style> p{ width:150px;height:50px;border:1px solid black;} #d1{ word-wrap:break-word;}#d2{ word-break:break-all;}#d3{ word-break:keep-all;} </style></head><body> <p id="d1">this is a longlonglonglonglongtext,如何換行？</p><br/><br/><p id="d2">this is a longlonglonglonglongtext,如何換行？</p><br/><br/><p id="d3">this is a longlonglonglonglongtext,如何換行？</p></body></html>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
