网页设计:css自动换行

转载 2007年09月22日 11:18:00
2007-09-16   作者: hemee

      连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,对于Div和table以及不同的浏览器,实现css自动换行的方法都稍有不同,下面分别介绍:

      对于div

  1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。

以下是引用片段:
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
<div id="wrap">ddd111111111111111111111111111111</div>

  效果:可以实现自动换行

  2.(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好!

以下是引用片段:
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }
<div id="wrap">ddd1111111111111111111111111111111111111111</div>

  效果:容器正常,内容隐藏

      对于table

  1. (IE浏览器)使用样式table-layout:fixed;

以下是引用片段:
<style>
.tb{table-layout:fixed}
</style>
<table class="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>

  效果:可以自动换行

  2.(IE浏览器)使用样式

以下是引用片段:
<style>
.tb {table-layout:fixed}
</style>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>

  效果:可以自动换行

  3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

以下是引用片段:
<style>
.tb{table-layout:fixed}
</style>
<table class="tb" width=80>
<tr>
<td width=25% nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>

  效果:两个td均正常自动换行

  4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

以下是引用片段:
<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>
<table class=tb width=80>
<tr><td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</table>

  这里单元格宽度一定要用百分比定义 效果:正常显示,但不能换行。

  注:在Firefox浏览器下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果。

 

CSS 自动换行样式

移动端经常会遇到屏幕被撑开的情况,下面是一些解决办法: 方法一:你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比)   方法二:强制不换行 div{//w...
  • Daisukes
  • Daisukes
  • 2017年01月19日 14:54
  • 1172

CSS设置table 中td的内容自动换行

表格中显示的内容不是中文而是纯数字或英文时,默认是不换行的(中文默认换行),想要设置换行,需要在table中加上一下样式,即可实现td中的内容自动换行 设置后效果图如下:...
  • who_is_xiaoming
  • who_is_xiaoming
  • 2016年10月13日 15:29
  • 7026

css中实现字符超出宽度自动换行和英语字符不断行的解决方法

css中实现字符超出宽度自动换行和英语字符不断行的解决方法 为了使英语字符不断开,我在显示内容的style是text-align:justify; text-justify:inter-id...
  • hjf_bluesky
  • hjf_bluesky
  • 2015年10月08日 21:55
  • 1758

CSS----表格文字自动换行

 如何防止页面的输入表格,被用户一次性在一行输入很长的字符而造成页面难行,其实很简单,可以用 CSS的换行属性强制换行就可以了,如下 ...
  • greymouseyu
  • greymouseyu
  • 2009年03月22日 23:51
  • 4191

HTML(网页设计)必用的设计模式---------CSS网页编程

网页基本的构造都会,想要让网页漂亮起来吗?这里会让您有不一样的体验
  • yangxin_blog
  • yangxin_blog
  • 2015年09月24日 19:59
  • 1589

《精通HTML5 + CSS3+JavaScript网页设计》

http://product.dangdang.com/main/product.aspx?product_id=22839416
  • brucexia
  • brucexia
  • 2013年03月26日 11:01
  • 2306

css 禁止文字自动换行

white-space:nowrap;
  • u011206991
  • u011206991
  • 2016年04月08日 16:16
  • 578

设置div中文字超出时自动换行和css实现文本超出N行之后显示省略号等

一、对于div强制换行 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; w...
  • Lpandeng
  • Lpandeng
  • 2017年06月06日 17:50
  • 4672

css如何自动换行对于div,p等块级元素(转)

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-spa...
  • sunyingyuan
  • sunyingyuan
  • 2014年01月16日 12:44
  • 1667

传智播客.韩顺平.轻松搞定网页设计(html.css.javascript)

传智播客.韩顺平.轻松搞定网页设计(html.css.javascript)http://www.kesjc.com/bbs/forum-66-1.html 第00讲.开山篇 第01讲.html介...
  • cgnine
  • cgnine
  • 2014年07月01日 18:08
  • 1405
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页设计:css自动换行
举报原因:
原因补充:

(最多只允许输入30个字)