如何使 flex-box 与需要截断文本的嵌套 child 一起工作？

Question

要让 flex-child 有带省略号的截断文本，可以给 parent 一个 min-with:0。在我的项目中，child 嵌套在近 10 个不同的 flex 容器中。我需要给所有 parent 一个 min-width:0 还是更好的解决方法？

sandbox

HTML

  <div class="flex-parent-parent-parent">
    <div class="flex-parent-parent">
      <div class="flex-parent">
        <div class="flex-child long-and-truncated">
    1. This is a long string that is OK to truncate please and thank you
        </div>
      </div>
    </div>
</div>

CSS

body {
  width:400px;
}

.flex-parent {
  display: flex;
  padding: 10px;
  border: solid;
}

.flex-parent-parent {
  display: flex;
  border: solid;
  padding: 10px;
}

.flex-parent-parent-parent {
  display: flex;
  border: solid;
  padding: 10px;
}

.long-and-truncated {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 1

你用这么多 div 包裹文本是有原因的吗？因为您现在的问题是，从技术上讲，文本不会溢出，而包装 div 会溢出。如果您只是将 flex-child long-and-truncated 包裹在 flex-parent-parent-parent 中，文本溢出会如您所愿。

Answer 2

这是由于 automatic minimum size of flex items. There is an 说：

If you're dealing with flex items on multiple levels of the HTML structure, it may be necessary to override the default min-width: auto / min-height: auto on items at higher levels.

Basically, a higher level flex item with min-width: auto can prevent shrinking on items nested below with min-width: 0.

您需要以某种方式在链上的每个弹性容器上覆盖 min-width。它不必是 0 除了 auto 以外的任何值。例如：

body {
  width: 400px;
}

.flex-parent,
.flex-parent-parent,
.flex-parent-parent-parent {
  display: flex;
  padding: 10px;
  border: solid;
  min-width: 200px;
}

.flex-parent {
  min-width: 0;
}

.long-and-truncated {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="flex-parent-parent-parent">
  <div class="flex-parent-parent">
    <div class="flex-parent">
      <div class="flex-child long-and-truncated">
    1. This is a long string that is OK to truncate please and thank you
      </div>
    </div>
  </div>
</div>

在我的示例中，我将所有弹性容器设置为具有相同的 min-width 值，但这不是必需的。您可以根据布局中的需要将每个设置为唯一。

.flex-parent { min-width: 0; }
.flex-parent-parent { min-width: 100px; }
.flex-parent-parent-parent { min-width: 400px; }

还有另一种方法可以实现这种行为，但仍然涉及所有嵌套的 flex 容器：

.flex-parent,
.flex-parent-parent,
.flex-parent-parent-parent {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
}

通过在每个嵌套的 flex 容器上设置 min-width and/or max-width 的一些组合，您应该能够截断文本。

如何使 flex-box 与需要截断文本的嵌套 child 一起工作？

How to make flex-box work with a nested child that needs truncated text?

html

css

flexbox