css 文字隐藏,鼠标移动显示

.d-line{
    width: 100px;
    height: auto;
}
.p-inline {
    height: 28px;
    line-height: 28px;
    margin: 0px 10px 10px 0px;
    padding: 0px 5px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #f2f2f2;
    color: #01aaed;
    cursor: pointer;
}

    .p-inline:hover {
        overflow: visible;
        white-space: normal;
        word-break: break-all;
        height: auto;
    }


<div class="d-line">
    <p class="p-inline">css文字超出部分自动隐藏,鼠标移入时,显示全部。</p>
</div>

  

默认显示:

鼠标移入时:

posted @ 2020-04-28 11:18  夏目-D  阅读(1256)  评论(0编辑  收藏  举报