CSS實現塊級內容不換行
作者：佚名 時間：2012-04-24 分享到：
下面介紹兩種實現的方法：
方法1：display: inline-block
“inline-block（行內塊）”是CSS 2.1增加的一個值，“inline-block”類型的元素產生塊框，但是卻又具有行內元素的特性，例如可以像行內元素一樣在一行內顯示，又可以可以設定寬度和高度等（塊級元素），其表現比較類似一個行內替換元素。
因此可以設定CSS如下：
.wrap { white-space:nowrap; } .wrap div { border:1px solid; display:inline-block; height:100px; overflow:hidden; width:100px; }“white-space:nowrap;”將強制在同一行內顯示所有文本，直到文本結束或者遭遇br元素，因此wrap的內容不會回行。
有些瀏覽器并不支持“inline-block”，例如IE 7.0-和Firefox 2.0-。
對于IE，對行內元素設定“display: inline-block;”，例如：
span { display: inline-block; }這樣會觸發IE內部的“hasLayout”屬性，從而使行內元素擁有了“inline-block”類型元素的某些表現。
而IE中直接設定塊級元素“display: inline-block;”是達不到預期效果的，而需要如下設定：
.wrap div {display:inline-block; /* 先使用display:inline-block屬性觸發hasLayout屬性 */……}.wrap div {display:inline; /* 再定義display:inline，讓塊元素呈遞為行內元素 */}對于Firefox，雖然可以使用其私有屬性“display: -moz-inline-box;”來模擬此效果，但是由于這個私有屬性會產生其他問題，因此不推薦使用。
因此完整的CSS如下：（查看示例文件。）
.wrap { white-space:nowrap; } .wrap div { border:1px solid; display:inline-block; height:100px; overflow:hidden; width:100px; } .wrap div { *display:inline; } .wrap div p { white-space:normal; }此種方法比較簡單，但是由于對源代碼中的空格瀏覽器處理方法不一樣，會造成內部div之間的間距不等，本例未處理此問題。
產生此間距的原因，是標簽之間的空格——元素標簽間的空格和制表符會被壓縮為1個空格顯示，而對于這些空格的處理，瀏覽器存在差異。刪除內部div之間的空格，可以解決問題。
方法2：display:table-cell
display:table-cell：將元素作為表格單元格顯示。
也就是讓這些div都變成一行內的單元格，所以不會回行。（查看示例文件。）
.wrap { display:table; } .wrap div { border:1px solid; display:table-cell;} .wrap div p{ height:100px; margin:0; padding:0; width:100px; }此種方法對于支持display:table-cell的瀏覽器，效果是統一的，但是對于table-cell類型的元素，在css的應用上有很多限制，例如margin無效、寬度和高度受同行和同列的其他單元格影響等。
但是此方法可以實現內部div的等高，即不設定高度，高度由內容決定，同一行的div等高。
同時，此方法對于IE 7-無效，因此針對IE 7- 還是要使用方法1。
完整代碼：
<!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>內容塊不換行</title>
<style type="text/css">
<!--
body { background:#FFF; color:#000; font:14px "宋體", simsun, serif;}
h1, h2, h3, h4 { font-size:larger; }
.wrap { white-space:nowrap; }
.wrap div { border:1px solid; display:inline-block; height:100px; overflow:hidden; width:100px; }
.wrap div { *display:inline; }
.wrap div p { white-space:normal; }
.examples2 .wrap { display:table; }
.examples2 .wrap div { border:1px solid; display:table-cell;}
.examples2 .wrap div p{ height:100px; margin:0; padding:0; width:100px; }
-->
</style>
</head>
<body>
<h1>CSS實現塊級內容不換行</h1>
<p>本題主旨在于學習display的不同值的表現。</p>
<div class="examples1">
<h2>方法1：display:inline-block</h2>
<p>此種方法比較簡單，但是由于對代碼中的空格瀏覽器處理方法不一樣，會造成內部div的間距不等，本例未處理此問題。</p>
<div class="wrap">
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
</div>
</div>
<div class="examples2">
<h2>方法2：display:table-cell</h2>
<p>對于IE 7-無效，因此針對IE 7- 需要采用方法1。</p>
<div class="wrap">
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
<div><p>div的內容要換行。</p></div>
</div>
</div>
</body>
</html>
