white-space:nowrap的应用

坏宅男

坏宅男

2016-02-19 23:27

下面图老师小编跟大家分享一个简单易学的white-space:nowrap的应用教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

在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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

span里的元素在被定义了 display:inline-block; 这个属性之后,就再也不会被断行了,也不会把外层的 div 撑开(除非span比div还要宽了  ),这样就达到了和英文单词一样的标签云效果了,呵呵~

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

展开更多 50%)
分享

猜你喜欢

white-space:nowrap的应用

Web开发
white-space:nowrap的应用

CSS文本:white-space

Web开发
CSS文本:white-space

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

取得Disk Free Space与Total Space

编程语言 网络编程
取得Disk Free Space与Total Space

“Mu Space”便于携带的音乐枕头

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
“Mu Space”便于携带的音乐枕头

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS文本:text-kashida-space

Web开发
CSS文本:text-kashida-space

ACE:White wins

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
ACE:White wins

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

在Word文档中输入分数的方法

在Word文档中输入分数的方法

CSS初学者常犯错误汇总

CSS初学者常犯错误汇总
下拉加载更多内容 ↓