div css nowrap無換行
2020-10-23 18:33:27
供稿：網友
例如寬度為210px的ul里 分別有4個li 這個4個li的寬度根據它們的自身內容長度為80px、120px、140px、80px。
我需要的效果是4個li向左自動排列。當第三個li和前兩個li的長度之和大于ul的寬度時候 第三個li則會下移一行。在第二行顯示。而不是把ul撐寬，或者是把自己撐高（內容換行，高度增加）
分別定義了ul的寬度210px和li的寬度自動，發現結果是：
ul并沒有被撐寬，可惜li也沒有自動到下一樣排列。而是內容換行，把li給撐高了。然后死皮賴臉的擠在了第一行。。
仔細考慮過之后認為問題出在li內部內容換行上。于是尋找禁止換行的css屬性。
網上查了下沒找到。問了群里永目日月，得到word-break這個屬性。 keep-all；不換行。。
加到li里后驚奇的發現問題解決了。
給工作組做頁面調試時候卻被人指出顯示有問題。
走過去一看，顯示的確沒有改變。才想到可能是瀏覽器版本問題。
我用的是IE7和FF 他們用的IE6。到DW里檢查了一下 發現word-break這個屬性確實不被IE6支持：
CSS 屬性 word-break 不受支持Microsoft Internet Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0
實在是郁悶，這個問題以前都有困擾過我。一直也沒解決。
那位朋友有什么好方法，敬請指教！不勝感謝。
問題已經解決。說來可笑。自己在DW里手動敲代碼。
發現一個屬性里有nowrap，這個nowrap不是word-braek的嗎？難道它能讓不換行？
抱著試試的心理我把它完整敲上
white-space: nowrap;
DW測試沒有出現下劃虛線，意思是瀏覽器支持方面沒有問題。
保存F12。問題解決了。呵呵。。。
順便寫下語法：
語法：
white-space : normal | pre | nowrap
取值：
normal : 默認值。默認處理方式。文本自動處理換行。假如抵達容器邊界內容會轉到下一行
pre : 換行和其他空白字符都將受到保護。這個值需要IE6+或者 !DOCTYPE 聲明為 standards-compliant mode 支持。如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode ，此屬性可以使用，但是不會發生作用。結果等同于 normal 。參閱 pre 對象
nowrap : 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。參閱 noWrap 屬性
說明：
設置或檢索對象內空格字符的處理方式。
空格字符，像換行，空格，TAB，在HTML文檔中默認的是被忽略的。當此屬性設置為 normal 或者 nowrap 時，你可以使用不換行空格的命名實體 來添加空格，用 br 元素來添加換行。此屬性對你使用文檔對象模型(DOM)操作的內容的影響與其對IE顯示內容的影響一樣。
此屬性作用于塊對象。
此屬性對于 currentStyle 對象而言是只讀的。對于其他對象而言是可讀寫的。
對應的腳本特性為 whiteSpace 。
from:woria.cn
