电脑软硬件应用网
当前位置： 电脑软硬件应用网 > 设计学院 > 网页设计 > 正文
[图文]多个文本对象的同行显示及自动断行
多个文本对象的同行显示及自动断行
2009-5-17 22:00:03　　文/转载 　　出处:近水社区 　　

最近有很多网友都在问一个问题：怎么能让多个不固定宽度的对象显示在一行上，如果有对象在剩余空间中显示不下，则换到下一行显示，而不是一个对象分两行显示。

的确，这是令初学者经常困惑的问题，也是经常在设计中用到设置。类似网站模板右侧的标签列表的应用。

下面请看这样一个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>最大、最小宽高设置</title>
<style type="text/css">
.all {
  float:left;
  width:240px;
  padding:10px;
  font-size:12px;
  color:#FFF;
  background-color:#CCC;
  overflow:hidden;
}
.all a {
  height:20px;
  line-height:20px;
  margin:0 14px 0 0;
  color:#000;
}
.all a:hover {
  color:#F00;
}
</style>
</head>

<body>
<div class="all">
 <a href="#">足球</a><a href="#">台球</a><a href="#">篮球</a><a href="#">排球</a><a href="#">羽毛球</a><a href="#">乒乓球</a>
 <a href="#">网球</a><a href="#">橄榄球</a><a href="#">冰球</a><a href="#">保龄球</a><a href="#">basketball</a><a href="#">football</a>
</div>
</body>
</html>

在IE6下运行后可以看到，第一行最后一个标签“乒乓球”就是换行显示。那么在Firefox下则不会出现这样的问题，如图：

也许这才是您想要的效果，那么，在IE下能否实现呢？答案是肯定的，只要您记住一下的几个步骤：

（1）如果对象是内联对象，则将其强制转换为块级对象。display:block。本例中用到的是链接标签a，是内联对象，所以，a标签要设置display:block。

（2）要设置对象的浮动属性。float:left。因为块级对象默认将占据整行的，这样做即可以使块级化了的内联对象显示在一行中，又可以使对象自适应内容。注意：如果对象同时有设置了左、右外边距，在IE6下很可能会出现双倍边距的Bug。此时，可以将display:block替换成display:inline来解决此问题。

（3）强制内容显示在一行上。word-break:keep-all。这是IE专有的属性，参见word-break。

（4）建议设置对象的高度。height。

向CSS的“a {...}”中加入：“display:block; float:left; word-break:keep-all;”，本例中的问题就可以解决。但有一种情况例外，就是：如果文字中包含“-”或空格等字符的时候，如下例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>最大、最小宽高设置</title>
<style type="text/css">
.all {
  float:left;
  width:240px;
  padding:10px;
  font-size:12px;
  color:#FFF;
  background-color:#CCC;
  overflow:hidden;
}
.all a {
  height:20px;
  line-height:20px;
  margin:0 14px 0 0;
  color:#000;
  display:block;
  float:left;
  word-break:keep-all;
}
.all a:hover {
  color:#F00;
}
</style>
</head>

<body>
<div class="all">
 <a href="#">足球</a><a href="#">台球</a><a href="#">篮球</a><a href="#">排球</a><a href="#">羽毛球</a><a href="#">乒-乓球</a>
 <a href="#">网球</a><a href="#">橄榄球</a><a href="#">冰球</a><a href="#">保龄球</a><a href="#">basket ball</a><a href="#">football</a>
</div>
</body>
</html>

将原“乒乓球”改为“乒-乓球”，将原“basketball”改为“basket ball”后，在IE6下还是会出现两行显示一个对象的情况。解决办法就是设置对象的处理空格方式的属性“white-space:nowrap”。

（5）强制文本在遇到空格或“-”等字符时不换行。white-space:nowrap。参见white-space。

（6）设置父对象的

overflow:hidden属性将超出的部分隐藏。当对象中文本超过了父对象的宽度，且没有隐藏超出的部分时，在IE6下会将父对象撑开，影响布局。

下面是完整的实例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>最大、最小宽高设置</title>
<style type="text/css">
.all {
  float:left;
  width:240px;
  padding:10px;
  font-size:12px;
  color:#FFF;
  background-color:#CCC;
  overflow:hidden;
}
.all a {
  height:20px;
  line-height:20px;
  margin:0 14px 0 0;
  color:#000;
  display:block;
  float:left;
  word-break:keep-all;
  white-space:nowrap;
}
.all a:hover {
  color:#F00;
}
</style>
</head>

<body>
<div class="all">
 <a href="#">足球</a><a href="#">台球</a><a href="#">篮球</a><a href="#">排球</a><a href="#">羽毛球</a><a href="#">乒-乓球</a>
 <a href="#">网球</a><a href="#">橄榄球</a><a href="#">冰球</a><a href="#">保龄球</a><a href="#">basket ball</a><a href="#">football</a>
</div>
</body>
</html>

这是解决此类问题的根本，希望本文会对大家有所帮助。
  • 上一篇文章：

  • 下一篇文章：
    • 最新热点 最新推荐 相关文章
    页面自动跳转的几种实现方法
    网站内容的四种分类形式 或多或少的…
    如何指定规范网页？rel="canonical"
    浅谈网站评论体系设计的不足之处
    网页中“上一篇”“下一篇”设计思考
    网页设计进度指示器帮助用户预测步骤
    网页用户体验:网页注册表单设计分析
    网页设计常出现8大问题
    网页设计的形象思维归纳
    彻底去掉动易内容页顶部的“改变图片…
    关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 |

    Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号