?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
                @charset "utf-8";
/**
 * @module 文本
 * @description 链接处理方法
 * @method link
 * @version 1.0.0
 * @param {Color} $color 定义链接颜色 <1.0.0>
 */
@mixin link($color: map-get($base, link-color)) {
    color: $color;
    cursor: pointer;
    &:active {
        opacity: .5;
    }
}
 
/**
 * @module 文本
 * @description 文本碰到边界是否换行
 * @method wrap
 * @version 1.0.0
 * @param {Boolean} $is-wrap 定义文本是否换行，默认值：true <2.0.0>
 */
@mixin wrap($is-wrap: true) {
    @if $is-wrap == true {
        word-wrap: break-word;
        word-break: break-all;
    } @else {
        white-space: nowrap;
    }
}
 
/**
 * @module 文本
 * @description 单行文本溢出时显示省略号
 * @method ellipsis
 * @version 1.0.0
 * @param {Length} $width 定义容器的宽度，默认值：null <2.0.0>
 * @param {Integer} $line-clamp 定义需要显示的行数，默认值：1（即使用单行溢出的处理方案），需要注意的是本参数只支持webkit内核 <2.1.2>
 */
@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);
    }
}
 
/**
 * @module 文本
 * @description 文字隐藏方案
 * @method texthide
 * @version 1.0.0
 * @param {Length} $width 定义容器的宽度，默认值：null <2.0.0>
 */
@mixin texthide($width: null) {
    overflow: hidden;
    white-space: nowrap;
    text-indent: 100%;
    width: $width;
}