《Sass》CSSだけで行数を指定してテキストを丸めて省略するためのmixinを作ったよ

下記のコードを用意しました。

@mixin lineClip($line-number: 2, $line-height: 1, $right-space: 1em, $background-color: #ffffff) {
  position: relative;
  overflow: hidden;
  height: calc(#{$line-number + em } * #{$line-height});
  padding-right: $right-space;
  line-height: $line-height;
  background-color: $background-color;
  &:before {
    content: "...";
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    width: $right-space;
  }
  &:after {
    content: "";
    position: relative;
    right: calc(#{$right-space} * -1);
    float: right;
    width: $right-space;
    height: 100%;
    margin-left:calc(#{$right-space} * -1);
    background-color: $background-color;
  }
}

以下のようにヘルパークラスをつくると、htmlの任意の要素のクラス属性にoneを記述すると１行に、twoを記述すると２行に指定することができます。

.one {
  @include lineClip(1);
}

.two {
  @include lineClip(2, 2);
}

.line-clip {
  // @include lineClip(row, line-height, right-space, background-color(same parent));
  // @include lineClip(行数, line-height, 右側の余白, 親要素の背景色);
}

一行に丸めたいときは、

<p class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ipsam saepe sit rem, vitae, repudiandae, culpa illum eligendi nihil cupiditate quidem reprehenderit sunt atque ut veniam, similique. Officiis, assumenda quasi?</p>

おわります。