css(不)换行介紹

hustzhq

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



1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
html:
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
css:
<style type="text/css">
#wrap{
  //word-wrap:break-word;
word-break:break-all;
   width:200px;
   background-color:#C0C0C0;
}
</style>
effect:




2.对于table,(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
html:
<table width="200" border="1" style="table-layout:fixed;background-color:#C0C0C0;">
<tr>
    <td width="25%" style="word-break: break-all;">abcdefghigklmnopqrstuvwxyz 1234567890</td>
    <td style="word-wrap: break-word;">abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>
effect:


有時我們希望area中的标签强制不换行，在IE中可由css:white-space:nowrap;来控制，具体设置如下:
example:
html:
<div style="white-space:nowrap;width:60px;background-color:#C0C0C0;">
      <INPUT TYPE="text" NAME="text" value="hello world!" style="width:100px">
       <INPUT TYPE="text" NAME="text" value="hello world!" style="width:100px">
</div>
effect:


从图中可以看出由于div的宽度只有60px,而下面两个文本框的宽度共有200px,但由于设置了white-space:nowrap;所以会在一行显示，
如果把上面代码改为:
html:
<div style="width:60px;background-color:#C0C0C0;">
     <INPUT TYPE="text" NAME="text" value="hello world!" style="width:100px">
     <INPUT TYPE="text" NAME="text" value="hello world!" style="width:100px">
</div>
effect:

可以看到由于没有设置强制不换行，所以在div里面如果子控件的宽度大于上层容器的可容纳宽度时，则会自动换行显示,
此上方式只式用於IE試用.