這篇文章主要介紹了使用white-space來阻止文字顯示自動換行的方法,同時文中也介紹了超出規定長度部分隱藏等相關的一些技巧,需要的朋友可以參考下
當文字很長的時，不管是IE還是Firefox，到達邊界都會自動換行。但是有的情況，我們並不希望這樣。比如：在網頁中的某個區域顯示一個使用ul li 標簽的文章標題列表。不想讓每行的文字自動換行，那就可以用CSS屬性white-space來解決。
代碼如下：
CSS Code復制內容到剪貼板
- <!DOCTYPE Html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
- <Html XMLns="http://www.w3.org/1999/xHtml">
- <head>
- <meta http-equiv="Content-Type" content="text/Html; charset=utf-8" />
- <title>web開發者網絡（www.admin10000.com）</title>
- <style type="text/CSS">
- ul#myList { margin:0px; padding:0px; list-style:none; border:1px solid #c10; width:400px; whitewhite-space:nowrap; overflow:hidden; }
- div#container { width:400px; border:1px solid #ccc; padding:10px; }
- </style>
- </head>
- <body>
- <div id="container">
- <ul id="myList">
- <li>Admin10000.com是web開發者學習交流的平台，這裡提供大量實用的技術文檔及相關資源下載。</li>
- <li>Admin10000.com是web開發者學習交流的平台，這裡提供大量實用的技術文檔及相關資源下載。</li>
- <li>Admin10000.com是web開發者學習交流的平台，這裡提供大量實用的技術文檔及相關資源下載。</li>
- </ul>
- </div>
- </body>
- </Html>
提示：
1.為ul標簽設置CSS屬性 white-space:nowrap; 使li中的文本不在換行。
2.為ul標簽設置CSS屬性 overflow:hidden; 讓超出指定寬度的部分隱藏
3.在IE6中必須明確指定ul的寬度。否則ul被撐開，直至所有內容被顯示。因此我們加上屬性width:400px。
所以這裡建議：width:400px; white-space:nowrap; overflow:hidden;