DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> white-space:nowrap的應用
white-space:nowrap的應用
編輯:CSS詳解     

在web2.0的概念中,標簽是個時常出現的東東,可是在設計時中文不象英文那樣在表現標簽雲時表現的那麼好,主要是中文詞組的成為標簽後,有時會出現長標簽在標簽雲中被斷行的問題。

今天發現有人在問這個問題,以前遇到過,沒有解決,這次亂試競然被我試出來了,主要是用 display:inline-block; 這個屬性~,具體代碼如下:

<style type="text/CSS">
<!--
body{font-size:12px; color:#fff;}
div{width:110px; background:#000;}
span{padding:10px;display:inline-block;}
-->
</style>
<div>
<span>標簽</span>
<span>標fdsfsd簽</span>
<span>標標</span>
</div>

span裡的元素在被定義了 display:inline-block; 這個屬性之後,就再也不會被斷行了,也不會把外層的 div 撐開(除非span比div還要寬了  ),這樣就達到了和英文單詞一樣的標簽雲效果了,呵呵~

PS:FF不支持這個屬性,還是IE比較人性化啊,哈哈~

PS:發現white-space:nowrap;就可以解決,FF也支持,郁悶啊~

<style type="text/CSS">
<!--
body{font-size:12px; color:#fff;}
div{width:110px; background:#000;}
span{padding:10px;white-space:nowrap;}
-->
</style>
<div>
<span>標</span>
<span>標fdsfsdfdsfdsfsdf</span>
<span>標</span>
</div>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved