HTML で余分なテキストを省略記号に変換する方法

HTML で余分なテキストを省略記号として表示したい場合は、いくつかの方法があります。

1行テキスト:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル タイプ="text/css">
    。箱{
        幅: 200ピクセル;
        背景色: 水色;
        テキストオーバーフロー: 省略記号;
        オーバーフロー: 非表示;
        空白: ラップなし;
    }
    </スタイル>
</head>
<本文>
    <div class="box">それは唐辛子を振りかけることです。Scola を見るのは開くことです。カード マシンがやってくることです。ファイリングとカード処理の時間が来ました。幸せに家に帰りましょう。広げましょう。広げましょう。幸せに家に帰りましょう。健康を広げましょう</div>
</本文>
</html>

複数行テキスト:

1. -webkit-line-clampプロパティの使用

。箱{
    幅: 200ピクセル;
    オーバーフロー: 非表示;
    テキストオーバーフロー: 省略記号;
    ディスプレイ: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: 垂直;
    border:solid 1px 黒;
}

デメリット: Webkit カーネルまたはモバイルページにのみ適用されます。 FirefoxやIEなどのブラウザではサポートされていません。

2. 擬似要素を使用して実装をシミュレートする

固定の幅と高さを設定し、余分な部分を非表示にし、末尾に省略記号 (...) を含む要素を使用してコンテンツの一部を覆います。

。箱{
    高さ: 200px;
    幅: 200ピクセル;
    位置:相対;
    行の高さ:1.4em;
    高さ:4.2em;
    オーバーフロー:非表示;
}
.box::after {
    コンテンツ："...";
    フォントの太さ:太字;
    位置:絶対;
    下:0;
    右:0;
    パディング:0 -20px 1px 45px;
    背景色:白;
}

ここでは、省略記号を含み背景色が白の疑似要素を使用して、コンテンツの一部をカバーしています。高さは行の高さの 3 倍です。表示する必要がある行数に設定します。

このアプローチは実装が比較的簡単で、互換性も優れています。

注意: IE6 または 7 との互換性を持たせたい場合は、疑似要素は使用できません。<div> または <span> タグを使用できます。 IE8 をサポートする場合は、::after を :after と記述する必要があります。

HTML で余分なテキストを省略記号に変換する方法についての記事はこれで終わりです。HTML で余分なテキストを省略記号に変換する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: WeChatアプレットでのwxsファイルの素晴らしい使い方をいくつか紹介します

>>: CSSプリコンパイル言語とその違いの詳細な説明