用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,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;