【css问题】flex布局中，子标签宽度超出父标签宽度，导致布局出现问题

ゞ浴缸里的玫瑰 2024-03-23 18:05 59阅读 0赞

场景：文章标题过长时，只显示一行，且多余的部分用省略号显示。

最终效果图：

![7f11b0420b2c4346abae64f47c3fff02.png][]

实现时，flex布局，出现问题：

发现text-overflow: ellipsis不生效，省略符根本没有出现。  
而且因为设置了 nowrap ，发现文字将f-content 撑开，导致内容超出了屏幕。

![e8c80fbcc3bf4e75aebaefc8f88f452b.png][]

原始代码：

<div class="flex">
      <div class="f-avatar">
        <xc-name-avatar nameavatar="'图片'"></xc-name-avatar>
      </div>
      <div class="f-content">
        <div class="row line">文章标题文章标题文章标题文章标题文章标题文章标题文章标题</div>
        <div class="row margin-t-sm">
          <span class="article-tag">文章标签</span>
          <span class="pull-right">2023.08.04</span>
        </div>
      </div>
    </div>
    <style>
      .flex{display: flex}
      .f-avatar{padding-right: 10px}
      .f-content{flex: 1}
      .line{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    </style>

解决办法：

尝试取消.flex容器的display: flex，省略号出现。又想到省略号，需要固定父级宽度。

方法一：尝试对父元素.f-content设置width: 100%无效，但是设置width: 0可行，即

.f-content{flex: 1;width: 0}

方法二、如果不设置宽度，.f-content可以被子节点无限撑开；因此.line总有足够的宽度在一行内显示所有文本，也就不能触发截断省略的效果。

.f-content{flex: 1;overflow: hidden}

上面的二种方法都可以达到我们需要的效果。

--------------------

补充说明：当页面上有通过display:none→ display:block的时候，如果.f-content设overflow:hidden。该小弹窗也会被隐藏，所以.f-content最好设为width: 0

![97b86417a47d4d8a8b8248a7ba2e0753.png][]

[7f11b0420b2c4346abae64f47c3fff02.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/78ea50d10d5841ee88d76934f2278a51.png
[e8c80fbcc3bf4e75aebaefc8f88f452b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/5ebe8d2f5c46485ebaf8bf14eb223d0d.png
[97b86417a47d4d8a8b8248a7ba2e0753.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/e2f01a4e3c8d4338aa8e53c028405b18.png