レンダリング

text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -moz-box;
      -moz-line-clamp: 2;
      -moz-box-orient: vertical;
      overflow-wrap: break-word;
      word-break: break-all;
      white-space: normal;
      overflow: hidden;

テキストオーバーフロー

オーバーフローしたコンテンツが表示されないことをユーザーに通知する方法を決定する CSS プロパティ。クリップしたり、省略記号 ('…') を表示したり、カスタム文字列を表示したりできます。

-webkit-line-clamp

ブロックコンテナーのコンテンツを指定した行数に制限するための CSS プロパティ。
これは、表示プロパティが -webkit-box または -webkit-inline-box に設定され、-webkit-box-orient (en- US) プロパティは垂直に設定されています
。ほとんどの場合、オーバーフロー属性も非表示に設定する必要があります。そうしないと、内部のコンテンツは切り取られず、コンテンツが指定された数だけ表示された後に省略記号 (省略記号) が表示されます。これをアンカー (アンカー) 要素に適用すると
、インターセプトアクションはテキストの最後ではなく、テキストの途中で発生する可能性があります。

オーバーフロー

CSS プロパティ -wrap は、分割できない文字列が長すぎて折り返しボックスに収まらない場合に、オーバーフローを防ぐためにブラウザがそのような単語の改行を許可するかどうかを示すために使用されます。word-break とは対照的に、overflow-wrap は、単語全体をオーバーフローせずにその行に収まらない場合にのみブレークを生成します。

注: word-wrap** プロパティはもともと Microsoft のプライベートプロパティでしたが、現在の CSS3 テキスト仕様ドラフトでは overflow-wrap という名前に変更されました。word-wrap は、overflow-wrap の「エイリアス」とみなされます。Google Chrome と Opera の安定したブラウザバージョンは、この新しい構文をサポートしています。**

ホワイトスペース

CSS プロパティは、要素内の空白 (en-US) の処理方法を設定するために使用されます。

.pay_row_1{
    
    
      padding: 5px;
      height: auto;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -moz-box;
      -moz-line-clamp: 2;
      -moz-box-orient: vertical;
      overflow-wrap: break-word;
      word-break: break-all;
      white-space: normal;
      overflow: hidden;
    }

 <div class="pay_row_1">
        <span class="tag_txt">京东贴息</span>
        <span class="pay_title">{
   
   {item}}</span>
      </div>

CSSは2行でのテキスト表示を実装します。

レンダリング

おすすめ