white-space:nowrap的应用

2016-03-29网页设计
7


在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>
The End
spa

相关推荐

分享js跳转页面方法
spanid=tiao"...
2017-06-13 网页设计
26

【CSS】实现强制不换行/自动换行/强制换行CSS样式
强制不换行div{white-space:...
2017-06-13 网页设计
41

HTML中Li标签的使用示例
这篇文章主要介绍了HTML中Li标签的使用示例,主要用来让文章标题和日期等左右对齐,需要的朋友可以参考下 希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一...
2016-04-19 网页设计
130

innerHTML属性应用(HTML DOM innerHTML)
定义和用法innerHTML获取或者修改DOM节点的HTML内容获取节点内容innerHTML返回DIV#test的内容:div id=testspan我是test里的内容 使用innerHTML时,不仅能返回文本,包括HTML结构也会整个返回/span/divscript...
2016-04-19 网页设计
34

块级元素和行内元素使用心得汇总
行内内容是说由行内元素组成的内容,行内元素大家都知道吧,比如 SPAN 元素,IFRAME元素和元素样式的display : inline的都是行内元素。例如文字这类元素,各个字母 之间横向排列,到最右端自动折行。块级内容跟则是由块级元素...
2016-04-19 网页设计
60

input,button制作按钮IE6,IE7点击时1px黑边框的解决方法
按钮在IE6中点击时1px黑边框的最常见的解决方法 首先设置按钮为none,然后在按钮外面套一层来实现边框的效果,部分代码如下 .btnbox{ border:solid 1px red;} .btn{ border:none;} span class=btnboxinp...
2016-04-17 网页设计
229