flex布局，不设置宽度，实现文字超出部分隐藏

1658906382815.png

例如上图这种布局，左边头像宽度固定80px，右边容器设置flex:1
如何让标题实现超出部分隐藏？
我们都知道，设置超出部分隐藏，都要设置固定宽度，超出固定宽度后，才会隐藏
但是某些情况下，容器的宽度是自适应的，不能写死的，这种情况处理方式如下：

.layout{
    display:flex;
}
.user-img{
    width:50px;
    height:50px;
}

.left-box{
    flex:1;
    min-width:0;    ``至关重要``
    white-space: nowrap;  ``至关重要``
}
.title{
     overflow: hidden;
     text-overflow: ellipsis;
     font-weight: normal;
}
<div class="layout">
     <img class="user-img' src="http://www.adfd.jpg">
     <div class="left-box">
        <h2 class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</h2>
        <button>按钮</button>
     </div>
<div>