用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也支持

目录
相关文章
|
9月前
SVG 文本(二)路径文本 <textPath>
SVG 文本(二)路径文本 <textPath>
84 0
|
20天前
|
前端开发
HTML中的pre标签表示空格或换行
HTML中的pre标签表示空格或换行
|
前端开发 JavaScript
css:white-space及文本回车换行符
css:white-space及文本回车换行符
324 0
css:white-space及文本回车换行符
|
前端开发 容器
单词太长导致自动换行,出现空白区域。——word-wrap和word-break
写在前面: 在写页面的时候,偶尔有时会遇到下图这两种情况,一种是单词过长时会溢出div,一种是直接换行,导致出现空白区域。这两个情景就需要word-wrap、word-break这两个属性出场来解决了。闲话不扯了,本文主要内容有:word-wrap和word-break属性介绍,使用方法,他们之间的区别,浏览器兼容性,demo链接。需要的朋友可以过来参考下,喜欢的可以点个赞,希望能对大家有所帮助。 应用场景:
695 0
单词太长导致自动换行,出现空白区域。——word-wrap和word-break
|
开发者
换行和div span标签|学习笔记
快速学习换行和div span标签
134 0
换行和div span标签|学习笔记
|
前端开发
css3 新属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容
我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替,类似这样的效果: 做到这样的效果,我们不仅需要运用到css3的新属性 text-overflow ,该属性的作用就是设置一下被隐藏文本的展示形式(例如隐藏文本用……展示),除此之外还需要用到属性 white-space 使文字不换行,以及使用属性 overflow:hidden 隐藏多余的文字 接下来我们就来分步讲解一下这几个属性的应用吧
268 0
css3 新属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容