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

leeon 发布于2019-08-30 15:52 / 3051人阅读

摘要：移动端经常出现一种样式左侧的标题右侧的标签，标题不长时标签跟随标题，标题过长时让标题省略。如下图所示实现很简单结构看起来是这样的精聚宽板凳老灶火锅簋街店样式看起来是这样的好处很明显可通过动态修改的和动态控制标签是跟随标题还是在最右端。

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

如下图所示：

实现很简单

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

原理很简单

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116463.html

知识整理之HTML篇

摘要：最近关注的重学前端系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提升。标准模式的排版和运作模式都是以该浏览器支持的最高标准运行。模式是目前最常用的模式。严格模式不允许展示型弃用元素和框架集。中空格不会被自动删除。最近关注winter的重学前端系列文章，也想把已知的前端知识体系梳理一遍，夯实基础的同时，总结提升。接下来会从HTML、CSS、JS、性能、网络安全、框架通...

yck 2019-08-02 14:10 评论0 收藏0
前端体系梳理

摘要：交互元素用于与用户交互的元素元数据元素被用于说明其他内容的表现或行为，或者在当前文档和其他文档之间建立联系的元素。一、开篇很久以前我们对于前端的理解就是开发web网页的，并且在PC上的浏览器进行展示；后来，随着响应式布局和智能手机的兴起，web网页更多的出现在了移动端的浏览器中；再后来，随着技术的不断发展，web页面逐渐出现在了PC、Android、Iphone的applicati...

widuu 2019-08-22 17:04 评论0 收藏0
前端体系梳理

摘要：交互元素用于与用户交互的元素元数据元素被用于说明其他内容的表现或行为，或者在当前文档和其他文档之间建立联系的元素。一、开篇很久以前我们对于前端的理解就是开发web网页的，并且在PC上的浏览器进行展示；后来，随着响应式布局和智能手机的兴起，web网页更多的出现在了移动端的浏览器中；再后来，随着技术的不断发展，web页面逐渐出现在了PC、Android、Iphone的applicati...

DataPipeline 2019-08-29 15:19 评论0 收藏0