背景:

做一个前面图片宽度固定，后面宽度自适应，使用到了flex布局，但是想让后面div里文字不换行，超出以点点表示时，这时布局就乱了，查了下，原来flex布局与white-space:nowrap有影响
解决办法，父div设置 min-width:0 即可

代码:

• html

<div class="container">
  <img class="avatar" src="./avatar.jpg">
  <div class="info">
    <h3 class="title">
      首先，我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的
    </h3>
    <p>
      <span class="name">作者名字</span>
      <time>发布时间</time>
    </p>
  </div>
</div>

• scss

.container {
  display: flex;
  align-items: center;
  width: 600px;
  padding: 10px 15px;
  margin: 100px auto;
  background: #f5f5f5;
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .info {
    flex: 1;
    margin-left: 10px;
    line-height: 1.5;
    min-width: 0; // 关键代码
    .title {
      font-size: 16px;
      color: #444444;
      // 文本超出折叠 显示...
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    p {
      margin-top: 10px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}

效果图