-单行文本超出:(建议设置一个宽度,默认为100%)
.team-content {
width: 500rpx;
display:-webkit-box;
-webkit-line-clamp:1;
overflow:hidden;
text-overflow:ellipsis;
-webkit-box-orient:vertical;
word-break:break-all;
}
-多行文本超出:
.homework {
display: -webkit-box; /*设置为弹性盒子*/
-webkit-line-clamp: 5; /*最多显示5行*/
overflow: hidden; /*超出隐藏*/
text-overflow: ellipsis; /*超出显示为省略号*/
-webkit-box-orient: vertical;
word-break: break-all; /*强制英文单词自动换行*/
}
其实单行文本只是比多行文本多加了一个宽度而已。
关于 word-break: break-all;的一个知识点。
word-break: break-all;并不能解决所有的自动换行,比如 “。。。。。”不会换行
使用word-break: break-all;无使用si'yword-break: break-word;完美解决。