1

2

3

4

5

6

7

// 只显示一行文字后省略

.element {

    width: 300px;               /* 需要设置一个固定宽度 */

    white-space: nowrap;        /* 强制单行显示，不换行 */

    overflow: hidden;           /* 超出盒子部分隐藏 */

    text-overflow: ellipsis;    /* 超出部分显示省略号 */

}

1

2

3

4

5

6

7

8

9

// 显示多行文字后省略

.element {

    width: 300px;                   /* 需要设置一个固定宽度 */

    display: -webkit-box;           /* 使用弹性盒布局 */

    -webkit-box-orient: vertical;   /* 垂直排列 */

    -webkit-line-clamp: 3;          /* 显示三行 */

    overflow: hidden;               /* 超出盒子部分隐藏 */

    text-overflow: ellipsis;        /* 超出部分显示省略号 */

}

1

2

3

4

5

6

7

8

//单行

$clamp(myHeader, {clamp: 1});

//多行

$clamp(myHeader, {clamp: 3});

//根据可用高度自动计算行数

$clamp(myParagraph, {clamp: 'auto'});

//根据固定高度自动计算行数

$clamp(myParagraph, {clamp: '35px'});

1

2

3

4

5

6

7

8

.element {

    display: block;              /* 显示为块 */

    overflow: hidden;            /* 隐藏超出内容 */

    text-overflow: ellipsis;     /* 超出部分显示省略号 */

    line-height: 1.5em;          /* 设置行高 */

    max-height: 4.5em;           /* 3行的最大高度，3行 * 1.5行高 = 4.5em */

    white-space: normal;         /* 保持正常的文本换行 */

}