Flex布局下文本溢出省略号竟然失效了!只需添加一个属性,Flex自适应宽度显示省略号

Flex布局下文本溢出省略号竟然失效了!只需添加一个属性,Flex自适应宽度显示省略号

使用text-overflow: ellipsis;文字溢出,代码如下

css 复制代码
.content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

通常情况下使用文字省略需要给一个固定的宽度,文字溢出后省略;当我们存在一种flex自适应布局时,我们无法给定一个固定宽度,内容宽度是根据外部元素宽度自适应,左侧固定,右侧flex: 1来自适应,代码如下

html 复制代码
<div class="containter">
    <div class="left">left</div>
    <div class="right">
        <div class="content">
            省略文字省略文字省略文字省略文字省略文字省略文字省略文字省略文字省略文字省略文字
        </div>
    </div>
</div>
css 复制代码
.containter {
    width: 500;
    height: 40px;
    display: flex;
    align-items: center;
    border: 1px solid black;
      .left {
        width: 100px;
        height: 20px;
        flex: none;
        background-color: blanchedalmond;
      }
      .right {
        flex: 1;
        background-color: aquamarine;
        .content {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
}

效果如下

我们会发现内容部分并未向我们想要的那样省略,超出显示

哈哈,我们可以在类名为right这个元素上添加min-width: 0就可实现溢出效果,修改后代码

css 复制代码
.containter {
    width: 500;
    height: 40px;
    display: flex;
    align-items: center;
    border: 1px solid black;
      .left {
        width: 100px;
        height: 20px;
        flex: none;
        background-color: blanchedalmond;
      }
      .right {
        flex: 1;
        background-color: aquamarine;
        min-width: 0;
        .content {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
}

效果如下

当然也可以使用overflow: hidden这个属性实现,同样在类名为right这个元素上添加,大家可以试试

相关推荐
老坛0015 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛0016 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾9 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐14 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价14 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花15 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101316 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
一大树16 分钟前
Vue3祖孙组件通信方法总结
前端·vue.js
不要进入那温驯的良夜17 分钟前
跨平台UI自动化-Appium
前端
海底火旺18 分钟前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js