用CSS控制自动换行(转)

转载 2007年09月24日 12:12:00

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法

对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }

1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

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

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

效果:可以实现换行

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

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

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

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

对于table

1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏

<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>

效果:隐藏多余内容

2.(IE浏览器)使用 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. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法

4.(Firefox浏览器)使用 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>
 

CSS 自动换行样式

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

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

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

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

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

css控制div自动换行

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有...
  • lanfeng330
  • lanfeng330
  • 2009年05月20日 17:15
  • 3347

CSS控制文本自动换行

http://www.php100.com/html/webkaifa/DIV_CSS/2009/0416/2453.html 1.你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比)...
  • jajavaja
  • jajavaja
  • 2013年11月19日 08:55
  • 773

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之自动换行[转]

 css之自动换行自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法对于div,p等块级元素正常文字的换行(亚洲文字和非亚...
  • angelmelody
  • angelmelody
  • 2007年10月19日 22:23
  • 296

css自动换行(转)

连续的英文或数字能是容器被撑大,不能根据容器的大小自动换行,对于Div和table以及不同的浏览器,实现css自动换行的方法都稍有不同,下面分别介绍:      对于div  1.(IE浏览器)whi...
  • ldl22847
  • ldl22847
  • 2009年12月18日 13:50
  • 576

css 禁止文字自动换行

white-space:nowrap;
  • u011206991
  • u011206991
  • 2016年04月08日 16:16
  • 578
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用CSS控制自动换行(转)
举报原因:
原因补充:

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