帶標籤的長標題省略展現的實現

移動端常常出現一種樣式：左側的標題+右側的標籤，標題不長時標籤跟隨標題，標題過長時讓標題省略。

以下圖所示：

實現很簡單

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動態控制標籤是跟隨標題仍是在最右端。

原理很簡單

浮動的元素會脫離文檔流，而不會脫離文本流。