cssテキストが2行以上または3行以上非表示になっている場合は、省略記号を付けます.

cssテキストが2行以上または3行以上非表示になっている場合は、省略記号を付けます.
text-aline: left/right/end/justify/inhertid;
まず、単行テキストを解決するには、両端揃えを設定します.
text-aline: justify ;
この設定は無効です!テキストまたは左揃え

hello world

解決方法:
1 . ラベルの内部にラベルを追加
​
hello world
iラベルのプロパティの設定

        {
            display: inline-block;
            conent: "";
            width: 100%;
        }

html構造にダミークラスを追加できるだけ余分なラベルを追加しないで、ダミークラスを使用して同じ目的を達成することができます

p{

    &::after{

    display: inline-block;

    conent: "";

    width: 100%;

    }

} 

sass構文

.
実際の開発では文字が何行を超えるか、固定行数を表示するだけで、省略記号を付けて、生きているうちに他の処理を加える.
省略記号が追加されています.

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;
    

さらに上り数を加算:

-webkit-line-clamp: 3;

##以上のコードは需要を実現することができるが、実際の開発過程において、特にモバイル端末の適合過程において多くの問題が発生する.

  .text {
        text-align: justify;
        line-height: 18px;
        &.hiddle {
          @include hiddle(2);
          //    sass          +             
        }
      }

移動端に最後の3つの点が表示され、一部のブラウザでは文字と重複しています.
解決方法:
オーバーラップが発生した場合は、余分な行を非表示にし、非表示にするときにtext-aline:leftを設定できます.
イベントをクリックした後:text-aline:justifyを設定します.
この問題を完璧に解決することができます
文章の冒頭で述べたtext-aline:justify単行問題は、ここでは存在せず、複数行が最後の行を出しても両端揃えである.
転載先:https://www.cnblogs.com/lakemonster/p/10232533.html