用DIV+CSS中如何设置，超出就自动换行输出?

Question

用DIV+CSS中如何设置，超出就自动换行输出

Answer 1

如果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;