ある段落では、ページが文字を 1 行だけ表示することを要求しますが、widthが固定されていて文字が長すぎる場合、長さ制限を超えた文字が隠され、省略記号が表示されるという要件が発生します。css はこのような属性をサポートしています。
単行テキストの溢れ隠蔽
div{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
複数行テキストの溢れ隠蔽
div {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
簡単な数行のコードで私たちの要求を満たすことができます。
しかし、注意すべき点があります！！
flex レイアウトはフロントエンドでコードを書く際によく使用されるレイアウト方式で、シンプルで便利かつ効果的ですが、flex レイアウトの要素内で文字の溢れ隠蔽を同時に使用することはできません。つまり、両者を同じタグ内に同時に表示することはできません。
ここで、私たちには対応する解決策があります。
flex レイアウトと隠蔽スタイルが同じ階層の要素に存在しないことを保証すればよいので、文字の外側にもう 1 つのタグを包むことができます。
以下のコードの書き方を採用できます；
<p>
<!-- この階層のタグでflexレイアウトを行います -->
<span> <!-- この階層のタグで文字が長すぎる隠蔽スタイルを導入します -->
<!-- テキスト -->
</span>
</p>