两边自适应宽度文字不换行, 中间文字换行/省略号显示

    <div class="Grid">
      <div class="Grid-cell">前前前前</div>
      <!-- 直接用 div 包裹文字就是换行显示, 加上这些样式后就是省略号显示 -->
      <div style="overflow: hidden;">
        <div
          style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
        >
          中中中中中中中中中中中中
        </div>
      </div>
      <div class="Grid-cell">后后后后</div>
    </div>

    .Grid {
      display: flex;
      width: 200px;
    }

    .Grid-cell {
      flex: 0 0 auto;
    }