CSSでテキストに複数行の省略記号を実装する方法-CSSチュートリアル-php.cn

CSSでテキストに複数行の省略記号を実装する方法

coldplay.xixi

リリース： 2023-02-16 18:43:11

オリジナル

28749 人が閲覧しました

CSS を使用してテキストに複数行の省略記号を実装する方法: 1. 「display: -webkit-box;」スタイルをテキスト要素に追加します; 2. 「-webkit-box-orient:vertical」を追加します;" スタイルをテキスト要素に追加します。 ;3. "-webkit-line-clamp: 3;" スタイル設定をテキスト要素に追加して、数行のテキストを表示します。 4. "overflow: hidden;" スタイル設定をテキスト要素に追加します。行数が指定された数を超えた場合に省略記号を表示するテキスト要素。

CSSでテキストに複数行の省略記号を実装する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS で複数行の省略記号を実装する方法:

単一行のテキストに省略記号のオーバーフロー表示を実装したい場合は、学生は全員、 text-overflow:ellipsis 属性を使用することを知っている必要があります。もちろん、一部のブラウジングと互換性を持たせるために widthwidth 属性も追加する必要があります。

単一行のテキスト省略を実現

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin:0 auto ;
                width:300px;
                color: red;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <div>单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略</div>
    </body>
</html>

ログイン後にコピー

結果

CSSでテキストに複数行の省略記号を実装する方法

複数行のテキスト省略を実現

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin: 0 auto;
                width: 300px;
                color: red;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div>
    </body>
</html>

ログイン後にコピー

結果

CSSでテキストに複数行の省略記号を実装する方法

関連属性の説明

CSS text-overflow 属性

text-overflow 属性は、テキストがそれを含む要素からオーバーフローした場合にテキストを表示する方法を指定します。オーバーフローの後、テキストを切り取ったり、省略記号 (...) を表示したり、カスタム文字列を表示したりするように設定できます (すべてのブラウザーでサポートされているわけではありません)。

text-overflow は、次の 2 つの属性とともに使用する必要があります:

white-space: nowrap;
overflow : 非表示 ;

#使用可能な属性値:

値説明クリップテキストを切り取ります。省略記号省略記号 #stringinitialinherit



	... を表示して、トリミングされたテキストを表します。
指定された文字列を使用して、トリミングされたテキストを表します。
はプロパティのデフォルト値に設定されます。
この属性値を親要素から継承します。

CSS ホワイトスペース属性

ホワイトスペース属性は、要素内の空白の処理方法を指定します。

#値説明通常デフォルト。空白はブラウザによって無視されます。 pre 空白スペースはブラウザによって保持されます。これは、HTML の

 タグのように動作します。 <td></td><td></td>nowrap

ログイン後にコピー

テキストは折り返されず、
タグが見つかるまで同じ行に続きます。 pre-wrap空白シーケンスを保持しますが、通常どおりラップします。 pre-line空白シーケンスを結合しますが、改行は保持します。 inherit空白属性の値を親要素から継承することを指定します。 CSS オーバーフロープロパティ

オーバーフロープロパティは、コンテンツが要素のボックスをオーバーフローした場合の動作を指定します。

#値説明デフォルト値。コンテンツはトリミングされず、要素ボックスの外側にレンダリングされます。コンテンツはトリミングされ、残りのコンテンツは非表示になります。コンテンツはトリミングされますが、ブラウザには残りのコンテンツを表示するためのスクロールバーが表示されます。コンテンツがトリミングされると、ブラウザには残りのコンテンツを表示するためのスクロールバーが表示されます。オーバーフロー属性の値を親要素から継承することを指定します。関連チュートリアルの推奨事項: CSS ビデオチュートリアル