ホームページ > ウェブフロントエンド > CSSチュートリアル > text-overflow: ellipsis を使用してホバー時に全文を表示します

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

DDD
リリース: 2024-12-04 11:19:09
オリジナル
670 人が閲覧しました

Show full text on hover with 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 サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート