【CSS】***行目でテキストを省略(…)にする方法

バックエンドエンジニアの方から「サーバでは文字数指定ならできるんだけど、CSSで***行目で指定できる？」という問い合わせがあったので、久しぶりに下記のCSSを使って対応した。

注意して欲しいのは、必ず下記の記述を全て指定すること。

対応するブラウザもかなり増えてきたので、今後はかなりの頻度で使える技術になると思う。

表示結果

See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.

HTML

<div>
  <p>日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、諸国民との協和による成果と、わが国全土にわたつて自由のもたらす恵沢を確保し、政府の行為によつて再び戦争の惨禍が起ることのないやうにすることを決意し、ここに主権が国民に存することを宣言し、この憲法を確定する。そもそも国政は、国民の厳粛な信託によるものであつて、その権威は国民に由来し、その権力は国民の代表者がこれを行使し、その福利は国民がこれを享受する。これは人類普遍の原理であり、この憲法は、かかる原理に基くものである。われらは、これに反する一切の憲法、法令及び詔勅を排除する。日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであつて、平和を愛する諸国民の公正と信義に信頼して、われらの安全と生存を保持しようと決意した。われらは、平和を維持し、専制と隷従、圧迫と偏狭を地上か</p>
</div>

CSS

p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;//5行目で省略する
  -webkit-box-orient: vertical;
}