用sass，stylus,styled-component对ellipsis省略号的封装

import styled from 'styled-components'

export default ({
  compOnent= null,
  width = 'auto',
  lineClamp = 1
}) => {
  let strTpl = `
    overflow: hidden;
    text-overflow: ellipsis;
    width: ${width};
  `
  if (lineClamp > 1) {
    strTpl += `
      display: -webkit-box !important;
      -webkit-line-clamp: ${lineClamp};
      -webkit-box-orient: vertical;
    `
  } else {
    strTpl += `
      white-space: nowrap;
    `
  }

  return styled(component) `
    ${ strTpl }
  `
}

wrap($is-wrap = true)
  if $is-wrap == true
    word-wrap: break-word;
    word-break: break-all;
  else
    white-space: nowrap;
    

ellipsis($width = null, $line-clamp = 1) 
  overflow: hidden;
  text-overflow: ellipsis;
  width: $width;
  if abs($line-clamp) > 1
    // 要使得多行截取生效，display的值只能为-webkit-box
    display: -webkit-box !important;
    -webkit-line-clamp: $line-clamp;
    flex-direction column
    wrap()
  else
    wrap(false)

@mixin wrap($is-wrap: true) {
    @if $is-wrap == true {
        word-wrap: break-word;
        word-break: break-all;
    } @else {
        white-space: nowrap;
    }
}
@mixin ellipsis($width: null, $line-clamp: 1) {
    overflow: hidden;
    text-overflow: ellipsis;
    width: $width;
    @if abs($line-clamp) > 1 {
        // 要使得多行截取生效，display的值只能为-webkit-box
        display: -webkit-box !important;
        -webkit-line-clamp: $line-clamp;
        @include flex-direction(column);
        @include wrap;
    } @else {
        @include wrap(false);
    }
}