在使用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 Explorer 5.0, Microsoft Internet Explorer 5.5, Microsoft Internet Explorer 6.0, Netscape Navigator 6.0, Netscape Navigator 7.0 css
實在是鬱悶,這個問題之前都有困擾過我。一直也沒解決。
那位朋友有什麼好方法,敬請指教!不勝感謝。 瀏覽器
—————————-我是分割線———————————— 佈局
問題已經解決。說來好笑。本身在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 。 spa
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瀏覽器
} 調試
涉及關鍵屬性的語法: orm
一、語法:
text-overflow : clip | ellipsis
參數:
clip : 不顯示省略標記(…),而是簡單的裁切
ellipsis : 當對象內文本溢出時顯示省略標記(…) 對象
二、
語法:
overflow : visible | auto | hidden | scroll
參數:
visible : 不剪切內容也不添加滾動條。假如顯式聲明此默認值,對象將被剪切爲包含對象的window或frame的大小。而且clip屬性設置將失效
auto : 此爲body對象和textarea的默認值。在須要時剪切內容並添加滾動條
hidden : 不顯示超過對象尺寸的內容
scroll : 老是顯示滾動條 ip
三、 語法: white-space : normal | pre | nowrap 參數: normal : 默認處理方式 pre : 用等寬字體顯示預先格式化的文本。不合並字間的空白距離和進行兩端對齊。參閱pre對象 nowrap : 強制在同一行內顯示全部文本,直到文本結束或者遭遇br對象。參閱td,div等對象的nowrap屬性(特性)