超出省略号,悬停显示全部css实现

最常用的三种换行方式。

一、超出换行

.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; /*文本自动处理换行*/
}

END