使用white-space來阻止文字顯示自動換行

2024-07-11 08:30:01

字體：大中小

供稿：網(wǎng)友

當文字很長的時，不管是IE還是firefox，到達邊界都會自動換行。但是有的情況，我們并不希望這樣。比如：在網(wǎng)頁中的某個區(qū)域顯示一個使用ul li 標簽的文章標題列表。不想讓每行的文字自動換行，那就可以用css屬性white-space來解決。
代碼如下：

CSS Code復制內(nèi)容到剪貼板

<!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開發(fā)者網(wǎng)絡（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開發(fā)者學習交流的平臺，這里提供大量實用的技術文檔及相關資源下載。</li>
<li>Admin10000.com是WEB開發(fā)者學習交流的平臺，這里提供大量實用的技術文檔及相關資源下載。</li> <li>Admin10000.com是WEB開發(fā)者學習交流的平臺，這里提供大量實用的技術文檔及相關資源下載。</li>
</ul> </div>
</body> </html>

　　提示：

　　1.為ul標簽設置CSS屬性 white-space:nowrap; 使li中的文本不在換行。　

　　2.為ul標簽設置CSS屬性 overflow:hidden; 讓超出指定寬度的部分隱藏

　　3.在IE6中必須明確指定ul的寬度。否則ul被撐開，直至所有內(nèi)容被顯示。因此我們加上屬性width:400px。

　　所以這里建議：width:400px; white-space:nowrap; overflow:hidden;