flex布局，父级不设置固定宽度，子级自适应文本超出隐藏

vue-202

已于 2024-07-03 11:05:46 修改

阅读量547

点赞数 1

文章标签： javascript 前端 css

于 2023-11-13 13:25:00 首次发布

本文链接：https://blog.csdn.net/weixin_48463654/article/details/134374923

版权

文章介绍了在项目场景中，如何处理多层flex容器下，当父级和子元素均不设固定宽度时，如何实现文本自适应并隐藏多余内容的CSS解决方案。通过设置关键样式如`flex:1`和`white-space:nowrap`来达到效果。

摘要由CSDN通过智能技术生成

项目场景：

多层flex嵌套，且父级不设置固定宽度，子元素也不设置固定宽度，自适应文本隐藏

解决方案：

示例：

- dom结构

<div class="attachment-item">
      <div class="attachment-item-icon">
        <img
          src="https://t8.baidu.com/it/u=945984959,3948445137&fm=85&app=131&size=f242,150&n=0&f=JPEG&fmt=auto?s=FEEBAA56CC371C1318339BFC0300903B&sec=1699981200&t=dec68eddf1426e615b1ecde7b0bf6a68"
          alt=""
        />
      </div>
      <div class="attachment-item-name">
        <div class="attachment-item-name_text">
          我是文件名称我是文件名称我是文件名称我是文件名称我是文件名称我是文件名称
        </div>
        <div class="file-size">7.83M</div>
      </div>
      <div class="attachment-item-menu">
        <div class="attachment-item-link-preview">预览</div>
        <div class="attachment-item-link-download">下载</div>
        <div class="attachment-item-link-delete">删除</div>
        <div class="attachment-item-status">
          <i class="el-icon-success" />
        </div>
      </div>
    </div>

- css样式

.attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.attachment-item-name {
  display: flex;
  align-items: center;
  flex: 1; //重点样式
  min-width: 0; //重点样式
  white-space: nowrap; //重点样式
}
.attachment-item-name .attachment-item-name_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-item-menu {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.attachment-item-menu > div {
  margin-left: 10px;
}