懸停時顯示全文並帶有文字溢出：省略號

受到這篇文章的啟發，有人會

只想為那些觸發清單上文字溢位規則的清單項目設定活動標題屬性。因此，您可以將滑鼠懸停在任何被截斷的文字上，並查看其全文的工具提示

這是我的方法。

<div>
    <span><span>Some longer text visible on hover</span></span>
    <span><span>Another longer text visible on hover</span></span>
    <span><span>Short text</span></span>
</div>

div {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}
div>span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
span>span:hover {
    position: absolute;
    background-color: rgba(5, 255, 255, 1);
}

以上是懸停時顯示全文並帶有文字溢出：省略號的詳細內容。更多資訊請關注PHP中文網其他相關文章！