css盒⼦⾃动换⾏,⽤DIV+CSS中如何设置，超出就⾃动换⾏输
出？
如果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，IE7display: 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;css设置文字垂直居中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。