省略号溢出会破坏 flex 的孩子尺寸

问题描述

我按行显示响应，每一行都是一个 flex 容器，有 3 个子项，由 flex-basis 属性分开。我已经向第一个孩子添加了一个文本，我想在其中使用省略号，以防它太长。然而，通过扩展第一个 flex 子元素（每行具有不同的大小，第二个和第三个子元素不在彼此的正下方）添加文本完全破坏了视图。看起来文本长度会影响第一个子元素的扩展程度。

代码如下（或多或少）：

.parent-flex {
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin: 0 10px;

    .child-1 {
        min-width: 0;
        display: flex;
        flex-direction: column;
        flex-basis: 45%;
    }

    .child-1-text {
        display: flex;
        flex-wrap: Nowrap;
    }

    .child-2 {
        min-width: 0;
        flex-basis: 35%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: center;
    }

    .child-3 {
        min-width: 0;
        flex-basis: 20%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-end;
        flex-direction: column;
    }
}

.text-with-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: Nowrap;
}

<div class="parent-flex">
    <div class="child-1">
        <div>
            Text <span>Additional text</span>
        </div>
        <div class="text-with-ellipsis">
            <span>Text to be shortened with ellipsis.</span>
        </div>
        <div class="child-1-text">
            <span>X</span>
        </div>
    </div>
    <div class="child-2">
        <div class="child-2-text"></div>
        <div class="child-2-text">
            <span>Some more text</span>
        </div>
    </div>
    <div class="child-3">
        <div>...</div>
        <div>...</div>
    </div>
</div>

我正在查看与 flex 和 overflow 相关的不同案例，但似乎没有任何效果对我有用。我试过用另一个 div 用省略号包装 div，向它添加 min-width: 0，flex-shrink 和 flex-grow 但它没有帮助（但也许我将它们插入错误的地方）。当我从样式中删除 white-space: Nowrap 时，子比例恢复正常，但显然文本没有换行。我可以确认包装的文本 div 宽度取决于内部文本的长度 - 它越长，div 越大（忽略它的父尺寸）。就像 clientWidth （或 scrollWidth 也许）是根据文本计算的，而不是根据所需的宽度。

解决方法

这样做。我使用了表格而不是 div，但您必须自己添加类“.first、.second 和 .third”。用户界面非常相似，第三列会自动调整大小。

代码片段如下

table {
  --first: 45vw;
  /*width of the first column*/
  --second: 20vw;
  /*width of the second column*/
  --third: clac(abs(100vw - var(--first) - var(--second)));
  /*third column: auto resize*/
  width: 100%;
}

td {
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.first {
  width: calc(var(--first) - 16px);
  max-width: calc(var(--first) - 16px);
}

.second {
  width: calc(var(--second) - 16px);
  max-width: calc(var(--second) - 16px);
}

.third {
  width: calc(var(--third) - 16px);
  max-width: calc(var(--third) - 16px);
}

<table border='1'>
  <thead>
    <tr>
      <th class='first'>Title1</th>
      <th class='second'>Title2</th>
      <th class='third'>Title3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class='first'>Text Additional text</td>
      <td class='second'>Some more text</td>
      <td class='third'>Dummy text</td>
    </tr>
    <tr>
      <td class='first'>Text to be shortened with ellipsis</td>
      <td class='second'>Nice to meet you</td>
      <td class='third'>See you soon</td>
    </tr>
  </tbody>
</table>

您的 CSS 中有几个语法错误，我已在下面修复。这解决了元素超出 MouseOut

设置的边界的问题

flex-basis

.parent-flex {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 0 10px;
}

.child-1 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex-basis: 45%;
}

.child-1-text {
  display: flex;
  flex-wrap: nowrap;
}

.child-2 {
  min-width: 0;
  flex-basis: 35%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
}

.child-3 {
  min-width: 0;
  flex-basis: 20%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
}

.text-with-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

您应该将 width 添加到 .text-with-ellipsis 类。我还用 flex-basis 和 width 更改了 max-width。

.parent-flex {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin: 0 10px;

  .child-1 {
    min-width: 0;
    display: flex;
    flex-direction: column;
    width: 45%;
    max-width: 45%;
  }

  .child-1-text {
    display: flex;
    flex-wrap: nowrap;
  }

  .child-2 {
    min-width: 0;
    width: 35%;
    max-width: 35%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
  }

  .child-3 {
    min-width: 0;
    width: 20%;
    max-width: 20%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
  }
}

 .child-1 .text-with-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70%;
}

<div class="parent-flex">
    <div class="child-1">
        <div>
            Text <span>Additional text</span>
        </div>
        <div class="text-with-ellipsis">
            <span>Text to be shortened with ellipsis.</span>
        </div>
        <div class="child-1-text">
            <span>X</span>
        </div>
    </div>
    <div class="child-2">
        <div class="child-2-text"></div>
        <div class="child-2-text">
            <span>Some more text</span>
        </div>
    </div>
    <div class="child-3">
        <div>...</div>
        <div>...</div>
    </div>
</div>

我现在唯一的解决方案是将 width 的 .text-with-ellipsis 设置为定义的大小。我使用媒体查询来帮助它针对不同的屏幕尺寸进行缩放。所以是这样的：

.text-with-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 500px;
    
    @media (max-width: 1400px) {
        width: 400px;
    }
}

flexbox flexbox html less