css控制自動換行,防止表格或div等被撐開[折行]


style=" table-layout: fixed; word-break: break-all;  word-wrap: break-word;"

fixed : 固定布局的算法。在這算法中,水平布局是僅僅基於表格的寬度,表格邊框的寬度,單元格間距,列的寬度,而和表格內容無關。 

 為了讓表格布局固定住,我們需要table-layout:fixed.假設沒有fixed,把你的分辨率減小到一定程度,你會發現white-space: nowrap是不會生效的。 
  技巧:為了使表格能夠適應液態布局(liquid layout,即可伸縮性),不建議你為表格設置絕對寬度,使用相對寬度如百分比是不錯的選擇。另外,把寬度相對固定的內容(比如時間格式)格設置絕對寬度,非固定的內容格不設置任何寬度,只需給予其設置white-space: nowrap,雖然在小分辨率的情況下會溢出,但依據某些觀點看來,這比折行更美觀。


相關知識:

強制不換行
p.www_52css_com {
  white-space:nowrap;
  }
自動換行
p.www_52css_com { 
  word-wrap: break-word; 
  word-break: normal; 
  }
強制英文單詞斷行
p.www_52css_com {
  word-break:break-all;
  }


CSS設置不換行:

  overflow:hidden 溢出隱藏
  white-space:nowrap 不換行 
  pre 換行和其他空白字符都將受到保護
  nowrap 強制在同一行內顯示所有文本,直到文本結束或者遭遇br對象

CSS設置強制換行:

  word-break:break-all 強制斷開實現轉行
  normal ; 依照亞洲語言和非亞洲語言的文本規則,允許在字內換行
  break-all : 該行為與亞洲語言的normal相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本
  keep-all : 與所有非亞洲語言的normal相同。對於中文,韓文,日文,不允許字斷開。適合包含少量亞洲文本的非亞洲文本與之間的高度解決辦法
  設置或檢索對象內文本的字內換行行為。尤其在出現多種語言時。對於中文,應該使用break-all 。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM