最常用的三种换行方式。
一、超出换行
.line{
height: auto;
word-wrap: break-word;/*强制换行*/
}
二、超出显示省略号
.line {
overflow: hidden; /*超出隐藏*/
text-overflow: ellipsis;/*隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
}
三、超出显示省略号,鼠标悬停折行显示全部
.line {
width: 200px;
height: auto;
display: inline-block;
overflow: hidden; /*超出隐藏*/
text-overflow: ellipsis; /*隐藏后添加省略号*/
white-space: nowrap; /*强制不换行*/
}
.line:hover {
white-space: normal; /*文本自动处理换行*/
}