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这个元素上添加,大家可以试试

部分网友说 设置flex-shrink:0,禁止元素被压缩就好了(记住这个属性,尤其是你图片变形的时候)--暂未尝试过,感兴趣的也可以试试

相关推荐
uhakadotcom8 分钟前
入门教程:如何编写一个chrome浏览器插件(以jobleap.cn收藏夹为例)
前端·javascript·面试
捡芝麻丢西瓜11 分钟前
SPM 之 混编(OC、Swift)项目保姆级教程(Swift Package Manager)
前端
我是天龙_绍11 分钟前
cdn是个啥?
前端
南雨北斗13 分钟前
VSCode三个TS扩展工具介绍
前端
若无_14 分钟前
了解 .husky:前端项目中的 Git Hooks 工具
前端·git
ze_juejin16 分钟前
前端发送语音方式总结
前端
给月亮点灯|21 分钟前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
Simon_He23 分钟前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown
顽强d石头28 分钟前
v-model与.aync的区别
前端·javascript·vue.js
Hilaku30 分钟前
我为什么认为 CSS-in-JS 是一个失败的技术?
前端·css·前端框架