text-overflow: ellipsis を使用してホバー時に全文を表示します

誰かが

するこの投稿に触発されました

リストのテキスト オーバーフロー ルールをトリガーするリスト項目に対してのみアクティブなタイトル プロパティを設定したいと考えています。したがって、切り詰められたテキストの上にマウスを置くと、その全文のツールチップが表示されます

これが私のアプローチです。

<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);
}

以上がtext-overflow: ellipsis を使用してホバー時に全文を表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。