带标签的长标题省略展现的实现

移动端常常出现一种样式：左侧的标题+右侧的标签，标题不长时标签跟随标题，标题过长时让标题省略。

以下图所示：

实现很简单

html 结构看起来是这样的：

<div class="caption">
    <span class="title ellipsis">
        <span class="bradge">精</span>
        <span class="bradge">聚</span>
        宽板凳老灶火锅(簋街店)
    </span>
</div>

css 样式看起来是这样的：

.caption {
    width: 200px;
    height: 500px;
    background: #efefef;
    margin: 0 auto;
}
.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
}
.bradge {
    float: right;
    margin-left: 10px;
}

好处很明显

可经过动态修改.ellipsis的max-width和width动态控制标签是跟随标题仍是在最右端。

原理很简单

浮动的元素会脱离文档流，而不会脱离文本流。