複数行対応の3点リーダー省略スタイル

truncateStyle.sass

@mixin truncateStyle($showLine: 3, $bgColor: #EEE, $fontSize: 14px, $lineHeight: 1.4)
  background: $bgColor
  overflow: hidden
  font-size: $fontSize
  max-height: $fontSize * $lineHeight * $showLine
  line-height: $lineHeight
  position: relative

  &:before,
  &:after
    background: $bgColor
    position: absolute

  &:before
    content: '...'
    top: $fontSize * $lineHeight * ($showLine - 1)
    right: 0
    width: 1em

  &:after
    content: ''
    height: 100%
    width: 100%

// Example
.truncateStyle
  @include truncateStyle
  width: calc(100% - 6rem)
  margin: 2rem auto

Refs

• 【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ – PSYENCE:MEDIA
• 二行目の最後を「...」をクロスブラウザで実現 - Qiita
• 【CSS】複数行でも3点リーダーをきかせる - Qiita

dart-sass... 😭

    height: $fontSize * $lineHeight * $showLine
           ^
      Undefined operation: "1.6rem times 1.2".

DEMO: https://codepen.io/t--takai/full/LYVEJXb