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

ゝ一世哀愁。 2023-06-23 02:58 5阅读 0赞

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

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

#### 实现代码 ####

<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>

#### 实现要点： ####

1.溢出隐藏的样式需要设置在目标文字元素的父元素上  
2.设置了flex:1自适应占满剩余宽度的元素需要设置width:0  
3.目标文字元素的父元素要设置width: 100%  
4.图标元素必须放在目标文字元素前面  
5.图标需要添加右浮动

[20191217104421226.png]: https://img-blog.csdnimg.cn/20191217104421226.png