首頁 > web前端 > css教學 > div css nowrap無換行_經驗交流

div css nowrap無換行_經驗交流

WBOY
發布: 2016-05-16 12:05:14
原創
1946 人瀏覽過

 
例如寬度為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,  Internet , 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

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板