html中溢出怎么自动换行,用DIV+CSS中如何设置，超出就自动换行输出?

墨蓝 2022-10-06 10:59 584阅读 0赞

![8884d0488697ced055126b73c71aa9cd.png][]

RISEBY

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

[8884d0488697ced055126b73c71aa9cd.png]: /images/20221005/2fbbd7725adb4bd3aefe7f95049c6641.png