强制换行和强制不换行

强制不换行
div{
white-space:nowrap;
}
自动换行
div{
word-wrap:break-word;
word-break:normal;
}
强制英文单词断行
div{
word-break:break-all;
}

 

一个强制不换行的例子：

一个div里面有几个人名，要对每个人名进行控制，写成了如下所示的：

<mce:style type="text/css"><!-- ul li{float:left;cursor:pointer;margin-right:5px;} --></mce:style><style type="text/css" mce_bogus="1">ul li{float:left;cursor:pointer;margin-right:5px;}</style>

<div style="width:300px;float:left;"> <ul> <li>张晓明</li> <li>陈晓华</li> <li>将培养</li> <li>欧阳奋强</li> <li>刘明利</li> <li>张欣欣</li> <li>杜娟娟</li> </ul> </div>

 

上面没有强制不换行，结果人名“欧阳奋强”分开显示在了两行，将li的style加上white-space:nowrap则如果本行位置不够显示一个li的时候，自动换在了下一行，而不是在li内部换行：

<mce:style type="text/css"><!-- ul li{float:left;cursor:pointer;margin-right:5px;white-space:nowrap;} --></mce:style><style type="text/css" mce_bogus="1">ul li{float:left;cursor:pointer;margin-right:5px;white-space:nowrap;}</style>