纯css实现鼠标悬停时title样式

一、实现效果

二、实现方式(after伪类)

给div添加data-title属性，所有文案放到data-title中

用after伪类获取data-title内容，结合定位实现鼠标悬停查看全部内容效果；

<div class="ellipse" style="
" data-title="综合楼301综合楼301综合楼3011综合楼301综合楼301综合楼301综合楼301综合楼301">综合楼301综合楼301综合楼3011综合楼301综合楼301综合楼301综合楼301综合楼301</div>

.ellipse {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
    margin: 0 10px;
}
.ellipse[data-title]:hover:after {
    content: attr(data-title);
    color: #fff;
    padding: 4px 8px;
    position: absolute;
    left: -50%;
    top: -10px;
    z-index: 20;
    white-space: nowrap;
    background-color: rgba(37, 39, 42, .85);
    border-radius:4px;
}