CSS を使用して単一行または複数行のテキストをオーバーフローさせ、省略記号を表示する方法

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

実装方法:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

効果は図に示すとおりです:

しかし、この属性は単一行テキストの省略記号のオーバーフロー表示のみをサポートします。複数行テキストの省略記号。

次に、次のように、複数行テキスト内の省略記号のオーバーフロー表示に注目してみましょう。

実装方法:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

効果は写真の通りです:

適用範囲:
WebKitのCSS拡張属性を使用しているため、この方法はWebKitブラウザとモバイルに適していますターミナル;

注:

1. -webkit-line-clamp は、ブロック要素に表示されるテキストの行数を制限するために使用されます。この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります。一般的に結合される属性:

2. display: -webkit-box; オブジェクトをフレキシブル ボックス モデルとして表示するために結合する必要がある属性。

3. -webkit-box-orient は、フレックス ボックス オブジェクトの子要素の配置を設定または取得する属性と組み合わせる必要があります。

実装方法:

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

効果は写真の通りです:

適用範囲:
この方法は幅広い用途がありますが、テキストが表示されると省略記号も表示されますラインを超えないようにし、この方法を js 最適化と組み合わせることができます。

注:

1. 余分なテキストが露出しないように、高さを行の高さの整数倍に設定します。

2. テキストの半分だけが表示されるのを避けるために、p::after にグラデーションの背景を追加します。

3. ie6-7 はコンテンツを表示しないため、ie6-7 と互換性を持たせるためのタグを追加する必要があります (例: ...)。 ::after を :after に置き換える必要があります。

以上がCSS を使用して単一行または複数行のテキストをオーバーフローさせ、省略記号を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。