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

如下图所示：

实现很简单

html 结构看起来是这样的：

    
    
             精        聚        宽板凳老灶火锅(簋街店)    
    

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动态控制标签是跟随标题还是在最右端。

原理很简单

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