css防止ul下的li裡面內容超出換行
摘自 http://blog.163.com/weison_hi/blog/static/176804047201192535224607/
在使用css結合div佈局的時候碰到了一個問題。
在一個規定寬度大小的ul裡邊 我把li的寬度定義為自動。企圖讓li根據內容長度來自動向左對齊排列。
例如寬度為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 Explorer5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, NetscapeNavigator 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 。
超出隱藏
li{
display:block;
font-size:14px;
height:16px;
line-height:16px;
width:330px;
white-space:nowrap; //強制不換行
overflow:hidden; //自動隱藏文字
text-overflow: ellipsis; //文字隱藏後新增省略號
-o-text-overflow:ellipsis; //適用於opera瀏覽器
}
涉及關鍵屬性的語法:
1、語法：
text-overflow : clip | ellipsis
引數：
clip: 不顯示省略標記（…），而是簡單的裁切
ellipsis : 當物件內文字溢位時顯示省略標記（…）
2、
語法：
overflow : visible | auto | hidden | scroll
引數：
visible : 不剪下內容也不新增滾動條。假如顯式宣告此預設值，物件將被剪下為包含物件的window或frame的大小。並且clip屬性設定將失效
auto : 此為body物件和textarea的預設值。在需要時剪下內容並新增滾動條
hidden : 不顯示超過物件尺寸的內容
scroll : 總是顯示滾動條
3、
語法：
white-space : normal | pre | nowrap
引數：
normal : 預設處理方式
pre : 用等寬字型顯示預先格式化的文字。不合並字間的空白距離和進行兩端對齊。參閱pre物件
nowrap : 強制在同一行內顯示所有文字，直到文字結束或者遭遇br物件。參閱td，div等物件的nowrap屬性（特性）
此文章屬於轉載！！轉載者：weison