単一行/複数行テキストのオーバーフローの省略スタイルを実装するにはどうすればよいですか?

I.はじめに

日々の開発表示ページでは、テキストの量が多すぎる場合、要素の幅の関係で完全に表示されない可能性があります。ユーザーエクスペリエンスを向上させるために、あふれたテキストをテキストとして表示する必要があります。この時点では省略記号。

テキストオーバーフローの場合、次の 2 つの形式に分けることができます。

単一行テキストのオーバーフロー
複数行のテキストのオーバーフロー

2. 実施方法

単一行テキストのオーバーフロー省略

文字は一行で表示され、余分な部分は楕円で表示されるので分かりやすさも抜群です。

実装も非常にシンプルで、関連するCSS属性は次のとおりです。

text-overflow : テキストがオーバーフローした場合に、トリミングされたテキストを表す省略記号が表示されるように指定します。
white-space : テキストを 1 行で表示するように設定します。行を折り返すことはできません。
overflow : テキストの長さが制限された幅を超える場合、超過した内容は非表示になります。

オーバーフローはhiddenに設定されています。通常、これはブロックレベル要素の外側の層で内部オーバーフロー要素を非表示にするために使用されます。または、次の 2 つの属性とともに使用して、テキストオーバーフローの省略を実現できます。

White-space:nowrap の機能は、行の折り返しなしでテキストを設定することであり、これがoverflow:hiddenおよびtext-overflow : ellipsis が有効になる基礎となります。

text-overflow属性値は次のとおりです。

Clip : オブジェクト内のテキストがオーバーフローする場合、トリミングされます。
ellipsis : オブジェクト内のテキストがオーバーフローした場合に省略記号 (…) を表示します。

text-overflow は、overflow:hiddenとWhite-space:nowrap が設定されている場合にのみ有効になります。

例えば

<p 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p >

<style>
    p{
    
    
        overflow: hidden;
        line-height: 40px;
        width:400px;
        height:40px;
        border:1px solid red;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>

次のように：

ここに画像の説明を挿入します

複数行のテキストのオーバーフロー省略

複数行のテキストがオーバーフローする場合は、次の 2 つの状況に分類できます。

高さに基づいて切り捨てられます
行番号に基づいて切り詰める

高さに基づいて切り捨てられます

擬似要素+位置決め

コアのCSSコード構造は次のとおりです。

位置:相対:擬似要素を絶対的に配置します。
overflow: hidden: テキストが制限された幅を超えてコンテンツが非表示になります)
Position:Absolute: 省略記号を絶対位置に配置します。
line-height: 20px: 要素の高さと組み合わせて、高さが固定の場合に行の高さを設定し、表示行数を制御します
height: 40px: 現在の要素の高さを設定します
::after {}: 省略記号のスタイルを設定します

コードは次のようになります。

<body>
    <div class='demo'>这是一段很长的文本</div>
</body>


<style>
    .demo {
    
    
        position: relative;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
    }
    .demo::after {
    
    
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0 20px 0 10px;
    }
</style>

疑似要素を使用して行末を絶対的に配置し、テキストを覆い、overflow: hiddenを使用して余分なテキストを非表示にします。

この実装には次の利点があります。

優れた互換性と主要な主流ブラウザに対する優れたサポート
応答性の高い切り捨て、さまざまな幅に応じて調整

英語で一般的なテキストが存在する場合、word-break:break-allを設定して、改行時に単語を分割できるようにすることができます。

行数に基づく切り捨て
の純粋な CSS 実装も非常にシンプルで、コアとなる CSS コードは次のとおりです。

-webkit-line-clamp: 2: ブロック要素に表示されるテキストの行数を制限するために使用されます。この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります)
表示: -webkit-box: 1 と組み合わせて使用され、オブジェクトをフレキシブルボックスモデルとして表示します。
-webkit-box-orient:vertical: フレックスボックスオブジェクトの子要素の配置を設定または取得するために 1 と組み合わせて使用されます。
overflow: hidden: テキストが制限された幅を超えてコンテンツが非表示になります。
text-overflow: ellipsis: 複数行のテキストの場合、省略記号「...」を使用して、範囲を超えるテキストを非表示にします。

<p>
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p >


<style>
    p {
    
    
        width: 400px;
        border-radius: 1px solid red;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

上記はwebkitのCSS属性拡張を使用しているため、対応ブラウザ範囲は PC 側の webkit core ブラウザとなりますが、モバイル端末の多くは webkit を使用しているため、モバイル端末ではこの形式が一般的です。

テキストが英語または数字の長い段落である場合は、word-wrap:break-word属性を追加する必要があることに注意してください。

JSを使用してCSSと連携することもできます。実装コードは次のとおりです。

CSS の構造は次のとおりです。

p {
    
    
    position: relative;
    width: 400px;
    line-height: 20px;
    overflow: hidden;

}
.p-after:after{
    
    
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -moz-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

JS の構造は次のとおりです。

$(function(){
    
    
 //获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
   $('p').each(function(i, obj){
    
    
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        if((height / lineHeight) >3 ){
    
    
            $(this).addClass("p-after")
            $(this).css("height","60px");
        }else{
    
    
            $(this).removeClass("p-after");
        }
    });
})

3. 単一行/複数行のテキストオーバーフローを実装する省略スタイルには、次の利点と欠点があります。

アドバンテージ：

シンプルで使いやすい: 実装は比較的簡単で、効果を得るために必要な CSS プロパティは少数です。
ユーザーエクスペリエンスの向上: 限られたスペースでより多くのテキストコンテンツを表示し、ページのスクロールと垂直スペースの占有を減らし、ユーザーの読書エクスペリエンスを向上させます。
ページの美しさを高める: テキストコンテンツがコンテナの境界を越えないようにするために、過度に長いテキストを省略して表示し、ページをよりすっきりと美しく見せます。

欠点:

一部のブラウザのみをサポート: 複数行テキストオーバーフローの省略スタイルは、現在 WebKit ブラウザでのみサポートされています。他のブラウザでは、JavaScript などの他のテクノロジを使用して実装する必要があります。
完全なコンテンツを表示できません: 省略されたテキストが非表示になっているため、ユーザーは完全なテキストコンテンツを直接表示できず、他の方法またはインタラクションを通じて完全なコンテンツを表示する必要がある場合があります。
特定のシナリオには適さない: 単一行/複数行のテキストオーバーフローの省略記号スタイルは、短いタイトルや要約などには適していますが、長い記事など、完全な詳細コンテンツを表示する必要がある状況には適していない可能性があります。またはリッチテキストエディター。

要約すると、単一行/複数行のテキストオーバーフローの省略スタイルには、ユーザーエクスペリエンスとページの美しさを向上させるという点で一定の利点がありますが、ブラウザーの互換性や不完全なコンテンツの表示などの制限もあります。使用する場合は、特定のニーズと使用シナリオに基づいて比較検討する必要があります。

4. 単一行/複数行のテキストオーバーフローの省略スタイルは、次のシナリオに最も適しています。

タイトル: タイトルテキストが長すぎる場合、楕円スタイルを使用すると、他の方法で完全なタイトルを表示するユーザーの機能に影響を与えることなく、タイトルをより簡潔に表示できます。
概要: 通常、概要テキストは短くなりますが、一部の概要コンテンツが長すぎる場合は、楕円スタイルを使用するとページがより美しくなります。
カードレイアウト: カードレイアウトでは、通常、各カードには限られたテキストコンテンツのみを含めることができるため、省略されたスタイルを使用するとスペースを節約し、レイアウト効果を向上させることができます。
コメント、メッセージなどのリスト: コメントやメッセージなどのユーザーが作成したテキストは長すぎる可能性があります。省略されたスタイルを使用すると、ページが長すぎることを防ぎ、ユーザーはクリックまたは他の対話型の方法でコメント全体を展開できるようになります。

単一行/複数行のテキストオーバーフローの省略記号スタイルは、すべてのシナリオに適用されるわけではないことに注意してください。このスタイルは、長い記事やリッチテキストエディターなど、完全かつ詳細なコンテンツを表示する必要がある状況にはお勧めできません。さらに、実際の使用時には、特定のページレイアウトやデザイン要件などの要素を考慮する必要があります。