如果DIV定義的寬度，當(dāng)文本超過(guò)這個(gè)寬度時(shí)就會(huì)自動(dòng)換行。自動(dòng)換行：div{ word-wrap: break-word; word-break: normal;}

如果是是連續(xù)的數(shù)字和英文字符換行，則如下： 

div強(qiáng)制換行

（IE瀏覽器）white-space:normal; word-break:break-all;這里前者是遵循標(biāo)準(zhǔn)。

#wrap{white-space:normal; width:200px; }

或者

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

（Firefox瀏覽器）white-space:normal; word-break:break-all;overflow:hidden;

同樣的FF下也沒(méi)有很好的實(shí)現(xiàn)方法，只能隱藏或者加滾動(dòng)條，當(dāng)然不加滾動(dòng)條效果更好！

#wrap{white-space:normal; width:200px; overflow:auto;}

或者

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

強(qiáng)制英文單詞斷行：

div{word-break:break-all;}

css代碼如下：

text-overflow: -o-ellipsis-lastline;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2; //這兒的數(shù)字代表的就是你所需要實(shí)現(xiàn)效果的第N行

擴(kuò)展資料：

css小知識(shí)點(diǎn)集錦

子元素文字始終居中

div{ width:300px; height:300px;border:1px solid red; }

p{ height:300px; display:table-cell; verticle-align:middle; }

盒子水平、垂直居中

CSS3寫(xiě)法

display: flex;

justify-content: center; /* horizontal centering */

align-items: center; /* vertical centering */

普通寫(xiě)法 //不支持IE6，IE7

display: table-cell;

vertical-align: middle;

給定寬度，內(nèi)部文字，元素平均分布

display: flex;//父盒子

justify-content: space-around/space-between;//父盒子

文字顯示第N行之后變成…顯示

text-overflow: -o-ellipsis-lastline;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2; //這兒的數(shù)字代表的就是你所需要實(shí)現(xiàn)效果的第N行

-webkit-box-orient: vertical;