複数行で文末に「...」実装（テキストエリア可変アリ）

課題

複数行で文末に「...」をつけるという事案について、よく作業するのでメモ。
-webkit-line-clampがIEでも対象になればとてもありがたいのだが、、。

◆以下の要件を満たすことを前提とする

• 複数行対応
• 文字量は可変（CMS等などで流し込まれる文字など文字量が読めない場合）
• レスポンシブでも「...」が正しく表示される

解決方法

<p>テキストがはいりますテキストがはいりますテキストがはいりますテキストがはいります</p>

p {
  position: relative;
  width: 20em;
  max-height: 4.2em;
  line-height: 1.4;
  overflow: hidden;
  background-color: #fff;
}
p:before,
p:after {
  background-color: #fff;
}
p:before {
  content: '...';
  position: absolute;
  top: 2.8em;
  right: 0;
  padding: 0 0.1em;
}
p:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
}