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
具体解决方法请百度(奸笑:)