對于阿拉伯數(shù)字和英文的折行問題,大家肯定已經(jīng)有所了解。強制折行的樣式為:word-break:break-all;word-wrap:break-word;
說實話,到現(xiàn)在我也沒有記下來,這兩行代碼實在太相近太繞了。而為了保證兼容性,它們兩個必須同時出現(xiàn)。
這里說的恰是相反的情況,很多時候,我們要求目標容器為一個整體,不可以折行。參見下圖:
藍色標簽是一個整體,樣式為:background:#dbebf4; height:20px; float:left;padding:0 4px; display:inline-block; line-height:20px; margin:2px10px 4px 0; color:#79B3D5; font-size:12px;。
在IE6下的效果卻變成了:
藍色標簽里的文字居然自動折行了。
遇到此種情況,可以添加一個強制不折行的樣式:white-space: nowrap;
類似的情況還有:
詳情兩個字折行了是不是很不美觀?加上white-space:nowrap后,同樣可以達到強制不折行的目的: