由 flex-grow 调整大小的弹性项目中包含的文本上的省略号

Question

我有一行，使用 Flexbox，其中包含单元格。

我希望第一个单元格的文本位于一行并用

ellipsis

截断。 一切都是为了保持响应。

但是使用经典的 CSS 技巧：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

仅当包含文本的父元素具有固定的

width

时才适用。

HTML

<div class="row">
    <div class="cell cell1">
        Some long-text
        long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-long-
    </div>
    <div class="cell cell2">cell-2</div>
    <div class="cell cell3">cell-3</div>
    <div class="cell cell4">cell-4</div>
</div>

CSS

.row {
  display: flex;
  flex-direction: row;

  .cell {
    flex-grow: 1;
    flex-basis: 0;
  }
}

如何仅使用

flex-grow

+

flex-basis

定义单元格的大小并管理我的单行截断文本？

Answer 1

您可以对您的 CSS 进行此修改： 将

overflow: hidden

添加到所有单元格以确保文本溢出被隐藏并且 仅将

white-space: nowrap

和

text-overflow: ellipsis

添加到 .cell1 类以截断第一个单元格中的文本。 代码如下：

     .row {
        display: flex;
        flex-direction: row;

        .cell {
          flex-grow: 1;
          flex-basis: 0;
          overflow: hidden;
        }
      }
      .cell1 {
        white-space: nowrap;
        text-overflow: ellipsis;
      }