w11268 2023-02-23 17:38 采纳率: 100%
浏览 33
已结题

Flex布局中,文字超出隐藏不生效的问题。

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

img

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

img

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

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

  • 写回答

3条回答 默认 最新

  • w11268 2023-02-24 15:10
    关注

    因为在弹性布局中,设置了不换行 所以导致内容无收缩,解决方案可以给文字容器的父元素添加一个min-width: 0 参见链接

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
  • Evaporator Core 2023-02-23 19:06
    关注

    Flex布局中,子元素默认会撑开父元素的宽度,这会导致即使子元素设置了宽度并且超出部分被隐藏,父元素的宽度仍然被撑大。因此需要在父元素中设置flex-shrink属性来控制子元素的收缩比例,以避免出现该问题。

    可以在包含文本的div容器上添加flex-shrink: 0;的样式,以防止该容器撑开父元素的宽度。代码如下:

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

    此时,即使文本容器中的文本超出了容器的宽度,父元素也不会因此被撑开。

    评论
  • CSDN-Ada助手 CSDN-AI 官方账号 2023-02-23 21:22
    关注
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 3月4日
  • 已采纳回答 2月24日
  • 创建了问题 2月23日

悬赏问题

  • ¥15 关于#c++#的问题:在A和B类中应该怎么定义复制构造函数来避开unordered_set复制构造的问题(相关搜索:头文件)
  • ¥15 MICE包多重插补后数据集汇总导出
  • ¥15 一道算法分析问题(关于3-MSAT)
  • ¥15 C++ FLUENT 化学反应速率 编写困难
  • ¥15 Python嵌套交叉验证
  • ¥15 linuxkit+elasticsearch
  • ¥15 兄得萌6.13do题😭😭大一小东西的work
  • ¥15 投不到原始数据,gdal投影代码
  • ¥20 卷积混响的代码帮写。。
  • ¥88 借助代码处理雷达影像,识别任意区域洪水前后的被淹没区域,并可视化展示。