二行目の最後を「...」をクロスブラウザで実現

文字が溢れたら「...」を出すのは text-overflow: ellipsis がありますが、一行の場合にしか利用できません。二行目に「...」を出すのは、 -webkit-line-clamp というのがありますが、クロスブラウザでは利用できません。

CSSだけで実現するのは不可能だと思ってたんですけど、出来ちゃいました。

実物はこちらでご確認ください。

css

.lineclamp {

  /* config */
  line-height: 1.5;
  height: 3em;
  background-color: #fff;
  /* config end */

  position: relative;
  padding-right: 1em;
  overflow: hidden;
}

.lineclamp:before {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-block;
  width: 1em;
}

.lineclamp:after {
  content: "";
  position: relative;
  right: -1em;
  float: right;
  width: 1em;
  height: 100%;
  background-color: inherit;
}

IE8はなぜかダメでした。IE9からで。