图标跟随文字，文字超出隐藏

[liqinuo]

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

HTML:

<div class="jd">
    <span>小米官方旗舰店</span>
    <em>京东自营</em>
 </div>

CSS:

.jd {
    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; /* 标签的宽度 */
    }
}

[VickieYan]

如果文字是多行也适用吗？