CSSで長文を省力する際に学んだ方法

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

複数行の文章を省略

複数行テキストの末尾を…（3点リーダー）で省略したい。

以下のコードを使用したら簡単に実現できたが
デメリットとしてなどがある
- IEで未対応
- モバイル対応のみならば使える（Android版のFirefoxユーザーもいるが…）
- 使う場合はフォールバックも設定しておくのが望ましい

p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

IEにも対応できる様にする為にbefore, after要素を使用したコードが以下の形です！

.p {
  position: relative;
  max-height: 10em; /* 自分の指定の高さ */
  overflow: hidden;
  padding-right: 1rem; 
}
.p::before {
  position: absolute;
  content: "...";
  bottom: 0;
  right: 0;
}
.p::after {
  content: "";
  position: absolute;
  right: 0;
  width: 1rem;
  height: 1rem;
  background: white;
}

参考記事

・CSSで長い文章を省略して省略記号を表示させる方法
・複数行テキストの末尾省略をCSSのみで実現する
・Multi-Line Truncation with Pure CSS