CSS之自动换行

原创 2007年09月25日 14:46:00
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法

对于div,p等块级元素

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

html

<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>


css
#wrap{white-space:normal; width:200px; }
IE浏览器

连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

html
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

css
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}

Firefox浏览器
连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

html
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>

css
#wrap{word-break:break-all; width:200px; overflow:auto;}

对于table元素
IE浏览器
1. 使用 table-layout:fixed;强制table的宽度,多余内容隐藏
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>

2. 使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

3.在td,th中嵌套div,p等采用上面提到的div,p的换行方法

Firefox浏览器

1. 使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内,这里overflow:auto;无法起作用

<table style="table-layout:fixed" width="200">
<tr>
<td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</table>


2.在td,th中嵌套div,p等采用上面提到的对付Firefox的方法

最后,这种现象出现的几率很小,但是不能排除网友的恶搞。如果有什么问题请回复
  

CSS 自动换行样式

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

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

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

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

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

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

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

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

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

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

CSS实现Table单元格自动换行或不换行

用CSS实现Table单元格数据自动换行或不换行的实现方法:   1、强制换行: .AutoNewline{  word-break: break-all;/*必须*/}  自动换行自动换行自动换行自...
  • cngkqy
  • cngkqy
  • 2008年03月20日 11:55
  • 8616

div内文字超过宽度时自动换行

div 设置宽度后 style加上 word-break:break-all; 或者 word-wrap:break-word; 区别:(http://zhidao.baidu.com/link?...
  • eunyeon
  • eunyeon
  • 2016年10月14日 14:41
  • 7049

css设置表格自动换行;table换行无效

在前端table制作中,由于使用了一些插件导致table无法自动换行,智能手动为标签添加换行样式。 表格换行代码: td{ white-space: inherit; word-wrap: break...
  • hua_ban_yu
  • hua_ban_yu
  • 2017年12月01日 11:28
  • 91
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS之自动换行
举报原因:
原因补充:

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