white-space:nowrap的應用

2024-07-11 08:42:57

字體：大中小

來源：轉載

供稿：網友

在web2.0的概念中，標簽是個時常出現的東東，可是在設計時中文不象英文那樣在表現標簽云時表現的那么好，主要是中文詞組的成為標簽后，有時會出現長標簽在標簽云中被斷行的問題。
今天發現有人在問這個問題，以前遇到過，沒有解決，這次亂試競然被我試出來了，主要是用 display:inline-block; 這個屬性～，具體代碼如下：
<style type="text/css">

</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">

</style>
<div>
<span>標</span>
<span>標fdsfsdfdsfdsfsdf</span>
<span>標</span>
</div>

上一篇：display:inline | block |inline-block

下一篇：CSS縮寫優化CSS文件的體積