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

syle-component

使用方法

const 组件名 = ellipsis({

component:styled.div``,

width:'50px'(可选)，宽度

lineClamp:1(行数)

})

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 }
  `
}

 

stylus

使用方法

ellipsis null,1  

参数1：宽度（可选）

参数2：行数

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)

 

sass

使用方法

@include ellipsis(null,1)

参数1：宽度（可选）

参数2：行数

@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);
    }
}

注意

在使用该方法时，有时候会因为安装的包的原因会将一些属性进行隐藏，所以有时候会有bug

具体解决方法请百度（奸笑:）

 

转载于:https://www.cnblogs.com/guan-shan/p/10089401.html