关注联楷|返回首页 | 网站案例 | 帮助中心

合作共赢、快速高效、优质的网站建设提供商

上海网站建设 

服务热线:021-61394118

上海联楷科技

CSS实现块级内容不换行

作者:佚名   时间:2012-04-24   分享到:

下面介绍两种实现的方法:

方法1:display: inline-block

“inline-block(行内块)”是CSS 2.1增加的一个值,“inline-block”类型的元素产生块框,但是却又具有行内元素的特性,例如可以像行内元素一样在一行内显示,又可以可以设定宽度和高度等(块级元素),其表现比较类似一个行内替换元素。

因此可以设定CSS如下:

.wrap { white-space:nowrap; }  .wrap div { border:1px solid; display:inline-block; height:100px; overflow:hidden; width:100px; }

“white-space:nowrap;”将强制在同一行内显示所有文本,直到文本结束或者遭遇br元素,因此wrap的内容不会回行。

注意:《别具光芒:CSS属性、浏览器兼容与网页布局》123页《7.8 空白:white-space属性》小节,语法表中[继承]一项错误,应该为“继承”

有些浏览器并不支持“inline-block”,例如IE 7.0-和Firefox 2.0-。

对于IE,对行内元素设定“display: inline-block;”,例如:

span { display: inline-block; }

这样会触发IE内部的“hasLayout”属性,从而使行内元素拥有了“inline-block”类型元素的某些表现。

而IE中直接设定块级元素“display: inline-block;”是达不到预期效果的,而需要如下设定:

.wrap div {display:inline-block;  /* 先使用display:inline-block属性触发hasLayout属性 */……}.wrap div {display:inline;  /* 再定义display:inline,让块元素呈递为行内元素 */}
注意:此处display:inline-block和display:inline要分开写,而不能合并,这也是IE的一个Bug。

对于Firefox,虽然可以使用其私有属性“display: -moz-inline-box;”来模拟此效果,但是由于这个私有属性会产生其他问题,因此不推荐使用。

因此完整的CSS如下:(查看示例文件。

.wrap { white-space:nowrap; }  .wrap div { border:1px solid; display:inline-block; height:100px; overflow:hidden; width:100px; }  .wrap div { *display:inline; }    .wrap div p { white-space:normal; }

此种方法比较简单,但是由于对源代码中的空格浏览器处理方法不一样,会造成内部div之间的间距不等,本例未处理此问题。

产生此间距的原因,是标签之间的空格——元素标签间的空格和制表符会被压缩为1个空格显示,而对于这些空格的处理,浏览器存在差异。删除内部div之间的空格,可以解决问题。

方法2:display:table-cell

display:table-cell:将元素作为表格单元格显示。

也就是让这些div都变成一行内的单元格,所以不会回行。(查看示例文件。

.wrap { display:table; }  .wrap div { border:1px solid; display:table-cell;}    .wrap div p{ height:100px; margin:0; padding:0; width:100px; }

此种方法对于支持display:table-cell的浏览器,效果是统一的,但是对于table-cell类型的元素,在css的应用上有很多限制,例如margin无效、宽度和高度受同行和同列的其他单元格影响等。

提示:也可以参见《别具光芒:CSS属性、浏览器兼容与网页布局》一书中《第11章 表格》。

但是此方法可以实现内部div的等高,即不设定高度,高度由内容决定,同一行的div等高。

同时,此方法对于IE 7-无效,因此针对IE 7- 还是要使用方法1。

 

 

 

完整代码:

<!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=utf-8" />
<title>内容块不换行</title>
<style type="text/css">
<!--
body { background:#FFF; color:#000; font:14px "宋体", simsun, serif;}
h1, h2, h3, h4 { font-size:larger; }

.wrap { white-space:nowrap; }
  .wrap div { border:1px solid; display:inline-block; height:100px; overflow:hidden; width:100px; }
  .wrap div { *display:inline; }
    .wrap div p { white-space:normal; }
.examples2 .wrap { display:table; }
  .examples2 .wrap div { border:1px solid; display:table-cell;}
    .examples2 .wrap div p{ height:100px; margin:0; padding:0; width:100px; }
-->
</style>
</head>

<body>
<h1>CSS实现块级内容不换行</h1>
<p>本题主旨在于学习display的不同值的表现。</p>
<div class="examples1">
  <h2>方法1:display:inline-block</h2>
  <p>此种方法比较简单,但是由于对代码中的空格浏览器处理方法不一样,会造成内部div的间距不等,本例未处理此问题。</p>
  <div class="wrap">
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
  </div>
</div>
<div class="examples2">
  <h2>方法2:display:table-cell</h2>
  <p>对于IE 7-无效,因此针对IE 7- 需要采用方法1。</p>
  <div class="wrap">
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
    <div><p>div的内容要换行。</p></div>
  </div>
</div>
</body>
</html>



如没特殊注明,文章均为上海联楷网络原创,转载请注明来自:http://www.linksj.com/contact/20151229/n7623.html

上海联楷网络新闻