CSS はテキストの単一行および複数行のオーバーフローと省略効果を実現します

単一行のテキスト

.text {
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

• overflow: hidden(文字の長さが制限幅を超える場合、超過した内容は非表示になります)

• white-space: nowrap(テキストは一行で表示され、折り返せないように設定します)

• text-overflow: ellipsis(テキストがオーバーフローした場合に、トリミングされたテキストを表す省略記号が表示されるように指定します)

複数行テキスト (CSS)

.text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

• -webkit-line-clamp: 2(ブロック要素に表示されるテキストの行数を制限するために使用されます。2 は最大 2 行を表示することを意味します。この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります)

• display: -webkit-box(オブジェクトをフレックス ボックス モデルとして表示するには、1 と組み合わせて使用​​します)

• -webkit-box-orient: vertical(フレックス ボックス オブジェクトの子要素の配置を設定または取得するために 1 と組み合わせて使用​​されます)

• overflow: hidden(制限された幅からテキストがはみ出して内容が見えなくなります)

• text-overflow: ellipsis(複数行のテキストの場合、省略記号「...」を使用して、はみ出したテキストを非表示にします)

 

複数行テキスト (js)

• DOM サイズの変更を監視する

• scrollHeight > offsetHeight がオーバーフローするかどうかを判断する

• 二分探索複数行インターセプト文字クリティカル値 (アルゴリズムソリューション: 文字列がオーバーフローするかどうかを判断し、二分検索文字列がクリティカル部分文字列をオーバーフローし、制御...表示)

転載場所: https://mp.weixin.qq.com/s?src=11×tamp=1618627893&ver=3013&signature=*TZk8fTGv0ca2DRiTSoJFTszSgATyV5WJIoA0k6CclYuSQ5vq3eDmXIigrdxwyQLID-Ygf3TBsmNUociT7 FJf TOk6jscTrr1m41* Jw5g9RYBkzUhiiZOgROGp3SXNsDA&new=1