问题具体的操作

在flex布局中，如果一个元素设置了flex：1；子元素想做字符超出显示省略号的行为 overflow hidden white-space nowrap text-overflow ellipsis 发现 overflow hidden，元素随着文字的增多而变长，无法做到超出隐藏， hidden也失效了。

具体代码看下方

<div class="main">
    <img alt="" class="logo" src="xxx">
    <div class="content">
        <h4 class="name">xxx</h4>
        <p class="info">xxx</p>
        <p class="notice">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>
</div>

.main {
    display: flex;
}
.logo {
    width: 100px;
    height: 100px;
    margin: 10px;
}
.content {
    flex: 1;
}
.content > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

问题出现的原因和解决方法

因为设置了flex:1所有的内容就会根据内容的长度进行宽度拉伸，导致换行和裁剪的失效，解决办法其实有两种：

1. 第一种

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

给外层元素设置width: 0;自己元素的宽度控制不会超出父级，到达边缘的时候就触发超出隐藏，表现形式就是可以在结尾的时候以...结束。

2. 第二种

    .content {
        flex: 1;
        overflow: hidden；
    }

上面的二种方法都可以达到我们需要的效果，给需要控制的元素设置了 flex:1 的时候，它会动态的获得父容器的剩余宽度，且不会被自己的子元素把内容撑开。