[フロントエンド] 文章の文末を省略するためCSS実装を3つ（1行の場合と、複数行の場合） - YoheiM .NET

こんにちは、@yoheiMuneです。 今日はCSSを用いて、文章の末尾を省略する方法を、ブログに書きたいと思います。 目次 文章が1行の場合の文末省略 1行の文章の文末を省略するには、CSSのtext-overflow: ellipsis;を使います。 実際にはwidth、overflow、white-spaceのプロパティも合わせて指定します。 <p class="oneline-ellipsis">おはよう、こんにちは、さようなら、おやすみなさい。</p> <style> .oneline-ellipsis { /* 1. 横幅を指定する */ width : 200px; /* 2. はみ出した場合に、hiddenにする */ overflow: hidden; /* 3. 自動的な折り返しはしない */ white-space: nowrap; /* 4. 省略表現を指定する *

[yoheiM]

文末を省略するためのCSS実装