CSS3 flex配合float实现文字针对图标自适应溢出隐藏

Flex布局下文本与图标自适应显示

最新推荐文章于 2024-09-07 01:53:51 发布

原创最新推荐文章于 2024-09-07 01:53:51 发布 · 890 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #flex #float #溢出隐藏 #自适应

css 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Flex布局实现文本与图标在卡片式设计中自适应显示的效果，确保文本在图标宽度随机变化时能正确溢出隐藏。

需求：第一行文字相对后面的图标自适应溢出隐藏(图标宽度随机)

卡片采用flex布局宽度不固定(自适应父元素宽度变化)，左侧复选框固定宽度，右边自适应占满剩余宽度，右边第一行有文本和图标并存的情况，标题文本宽度不固定，后面的图标的宽度也不固定。
在这里插入图片描述

实现代码

<div class="card">
    <div class="checkbox">
        <el-checkbox v-model="checked"></el-checkbox>
    </div>
    <dl class="info">
        <dt>
            <i class="icon-plus fr"></i>
            <span>北京市北京市北京市北京市北京市北京市北京市北京市北京市(默认位置)</span>
        </dt>
        <dd>中心点：116.404, 39.915</dd>
        <dd>缩放层级：8</dd>
    </dl>
</div>

<style lang="scss">
.card {
    display: flex;
    padding: 10px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    .checkbox {
        width: 20px;
    }
    .info {
        flex: 1;
        width: 0;
        margin: 0;
        line-height: 1.5;

        dt {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #333;
            .fr {
            	float: right;
			}
        }
        dd {
            margin: 0;
            color: #999;
        }
    }
}
</style>