wrap-ellipsis-multiline.scss

/** 
 * Truncate the current element with a ellipsis over a fixed number of lines when it does not fit
 * 
 * @param {strimg} $lineHeight The line height with unit (1em, 1.785rem, 25px)
 * @param {number} $lineCount The number of lines to show
 * @param {
 *
 * @see http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
 */
@mixin wrap-ellipsis-multiline($lineHeight: 1.2em, $lineCount: 1, $bgColor: #ffffff){
  margin-right: -1em;
  max-height: $lineHeight * $lineCount; 
  overflow: hidden;
  padding-right: 1em;
  position: relative;
  text-align: justify;
  
  &:before {
    content: '…';
    position: absolute;
    right: .25em;
    bottom: 0;
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: $bgColor;
  }
}