用white-space:nowrap;解决中文标签换行问题

简介: 在web2.0的概念中,标签是个时常出现的东西,可是在设计时中文不象英文那样在表现标签云时表现的那么好,主要是中文词组的成为标签后,有时会出现长标签在标签云中被断行的问题。这个主要是用display:inline-block;这个属性~,具体代码如下:

在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还要宽了??),这样就达到了和英文单词一样的标签云效果了

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

PS:

FF不支持这个属性,还是IE比较人性化

其实white-space: nowrap;也可以解决,FF也支持

目录
相关文章
|
8月前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
288 0
|
6月前
|
小程序
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题:设置了word-break: break-all;和flex: 1;冲突flex不生效问题
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题:设置了word-break: break-all;和flex: 1;冲突flex不生效问题
202 1
|
数据库
UTF-8编码中的特殊空格之C2 A0 -> NO-BREAK SPACE
UTF-8编码中的特殊空格之C2 A0 -> NO-BREAK SPACE
216 0
|
前端开发 JavaScript
css:white-space及文本回车换行符
css:white-space及文本回车换行符
402 0
css:white-space及文本回车换行符
|
Android开发
如何在Eclipse中显示空格(space)和制表符(tab)
在ECLIPSE开发中,我们有时无法区分空格(SPACE)和制表符(TAB),通过下面的选择设置就能很好区分 Window->Preferences->General->Editors->Text Editors->Show whitespace characters ...
1141 0
|
前端开发 容器
单词太长导致自动换行,出现空白区域。——word-wrap和word-break
写在前面: 在写页面的时候,偶尔有时会遇到下图这两种情况,一种是单词过长时会溢出div,一种是直接换行,导致出现空白区域。这两个情景就需要word-wrap、word-break这两个属性出场来解决了。闲话不扯了,本文主要内容有:word-wrap和word-break属性介绍,使用方法,他们之间的区别,浏览器兼容性,demo链接。需要的朋友可以过来参考下,喜欢的可以点个赞,希望能对大家有所帮助。 应用场景:
902 0
单词太长导致自动换行,出现空白区域。——word-wrap和word-break
|
开发者
换行和div span标签|学习笔记
快速学习换行和div span标签
179 0
换行和div span标签|学习笔记
justify-content: space-between能够对齐的解决办法
justify-content: space-between能够对齐的解决办法