移动端ellipsis(...)的两种解决方案

移动端ellipsis(…)的两种解决方案

scss:

@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 !important;
        -webkit-line-clamp: $line-clamp;
        @include flex-direction( column );
        @include wrap;
    }@else {
        @include wrap(false)
    }
}

stylus:

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 !important
        -webkit-line-clamp $line-clamp
        flex-direction column 
        wrap()
    else 
        wrap(false)