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>

　　

默認顯示：

鼠標移入時：