如果DIV定義的寬度，當文本超過這個寬度時就會自動換行。自動換行：div{ word-wrap: break-word; word-break: normal;}

如果是是連續的數字和英文字符換行，則如下： 

div強制換行

（IE瀏覽器）white-space:normal; word-break:break-all;這里前者是遵循標準。

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

或者

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

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

同樣的FF下也沒有很好的實現方法，只能隱藏或者加滾動條，當然不加滾動條效果更好！

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

或者

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

強制英文單詞斷行：

div{word-break:break-all;}

css代碼如下：

text-overflow: -o-ellipsis-lastline;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2; //這兒的數字代表的就是你所需要實現效果的第N行

擴展資料：

css小知識點集錦

子元素文字始終居中

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

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

盒子水平、垂直居中

CSS3寫法

display: flex;

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

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

普通寫法 //不支持IE6，IE7

display: table-cell;

vertical-align: middle;

給定寬度，內部文字，元素平均分布

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; //這兒的數字代表的就是你所需要實現效果的第N行

-webkit-box-orient: vertical;