cssは単行、複数行のテキストオーバーフローを実現し、省略記号を表示する

                             。

                       text-overflow:ellipsis width    ：

.textOverflow1{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

の効果は次のとおりです.(デバッグツールを使用してすべてのテキストを表示できます)
Lidadaブログへようこそ.ここでは先端技術を一緒に交流することができます.
このプロパティは、単行テキストのオーバーフロー表示省略記号のみをサポートします.複数行のテキストオーバーフロー表示省略記号を実装する場合は、次のように書きます.

.textOverflow2 {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
.textOverflow2::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://lidada.org/wp-content/uploads/2017/11/overflow_bg.png) repeat-y;
}

の効果は次のとおりです.
Lidadaブログへようこそ.ここでは先端技術を一緒に交流することができます.Lidadaブログへようこそ.ここでは先端技術を一緒に交流することができます.Lidadaブログへようこそ.ここでは先端技術を一緒に交流することができます.Lidadaブログへようこそ.ここでは先端技術を一緒に交流することができます.Lidadaブログへようこそ.ここでは先端技術を一緒に交流することができます.Lidadaブログへようこそ.ここでは先端技術を一緒に交流することができます.Lidadaブログへようこそ.ここでは先端技術を一緒に交流することができます.Lidadaブログへようこそ.ここでは先端技術を一緒に交流することができます.
ここでは、いくつかの点に注意してください.

heightの高さはline-heightの3倍ですね.

終了の省略は、半透明のpngで薄くする効果や、背景色を設定することができます.

IE 6-7はcontentのコンテンツを表示しないので、互換性を持たせるには、...でシミュレーションするなど、コンテンツにラベルを追加することができる.

はIE 8をサポートするために、::afterを:afterに置き換える必要がある.

原文を参照:http://lidada.org/text_overflow/