图标跟随文字,溢出省略

标签一直跟随在文字后面。如果文字超出一行，文字裁断省略，标签保留在最右。

1
2
3
4
<div class="demo">
    <span>官方旗舰店</span>
    <em>特价优惠</em>
 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.demo {
    margin-right: 60px; /* 对应是标签的宽度 */
    white-space: nowrap;
    span, em {
        display: inline-block;
        vertical-align: middle;
    }
    span {
        max-width: 100%;
        /* 单行文字超出省略 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    em {
        width: 60px; /* 标签的宽度 */
        color: #fff;
        padding: 5px 8px;
        background: #f00;
    }
}