Flex布局中，文字超出隐藏不生效？

作者站长头像
站长
· 阅读数 6

当我给一个div容器添加文字超出隐藏时（使用white-space: nowrap;和超出隐藏），盒子的宽度仍被撑大，即使我给该容器设置了宽度(25%)后，超出隐藏效果生效，但盒子依然是撑大状态。

Flex布局中，文字超出隐藏不生效？

该盒子的父元素是一个设置了flex:16;的div，把其width设置为0后效果正常，但不明白其相关原理。

Flex布局中，文字超出隐藏不生效？

想问一下问什么会出现这种问题，感谢解答

相关Demo如下：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      border: 1px solid #ccc;
    }
    .text-ellipsis{
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
  
</head>

<body>

  <div>

    <div style="display: flex;">
      <div style="flex:4;">left</div>
      <div style="flex:16;">right</div>
    </div>

    <div style="display: flex;">
      <div style="flex:4;">left</div>
      <div style="flex:16;">
        <div class="text-ellipsis">
          Cg-4WlVQcm2If6MdAAT82WzB7C8AADYFAHANTUABPzx218Cg-4WlVQcm2If6MdAAT82WzB7C8AADYFAHANTUABPzx218Cg-4WlVQcm2If6MdAAT82WzB7C8AADYFAHANTUABPzx218.jpg
        </div>
      </div>
    </div>
    
  </div>
</body>

</html>
回复
1个回答
avatar
test
2024-07-09
flex-basis 属性下的最小尺寸是由内容决定的，而 width 属性下的最小尺寸是由 width 属性的计算值决定的。

简写的 flex: n 其实就是 flex: n n 0%。

因为设置了 flex: n 属性的元素的最小尺寸是最小内容的宽度（文字内容在所有换行点换行后的尺寸），而设置了标题不换行导致最小尺寸比较大，最终尺寸大于 flex:n 给到的 flex-basis:0%。

具体可以看我的这篇笔记，当时研究过这个问题 Flex 容器宽度被内容撑开的问题。还有另外一篇的 简写的 flex:1 具体简写了些什么？

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容