CSS: flex布局自适应情况下超出省略

作者: 春木橙云 | 来源:发表于2023-02-20 17:05 被阅读0次

需求：红框第一部分固定宽度，第二部分自适应，且超出部分省略，如下图。

自适应很好解决，方案很多，这里采用flex布局，即子项目flex:1;
省略号也好解决，可以看我的另一篇css超出隐藏。
但是这两个问题结合，如何处理。这里面有坑哦。
公布答案：在父级上加上overflow：hide;

<div className={styles.father}>
    <div className={styles.title}>
        标题
    </div>
    <div className={styles.content}>
        内容
    </div>
</div>

.father{
    overflow:hiden; //这里加上即可；
    display: flex;
    .title{
        width: 100px;
        ......
    }
    .content{
        flex: 1;
        overflow:hidden; //超出的文本隐藏
        text-overflow:ellipsis; //用省略号显示
        white-space:nowrap; //不换行
    }
}