截断嵌套的flex元素中的文本

Question

我有一个嵌套的flex容器，当我的文本不足以显示（https://codepen.io/BigMike/pen/mmMxQN）时，我希望将其截断。

我想要什么

（大屏幕）

（截断的小屏幕）

我以为我可以用

来做

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

但随着我缩小屏幕，孩子到了一个不会变小的地步。

有什么建议吗？

Answer 1

根据您的评论，如果您添加此规则，它将全部停留在一行

.regular {
  flex-shrink: 0;      /*  won't allow element to become smaller than its content */
}

Updated codepen

.rows {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex-basis: 50%;
  background-color: red;
  min-width: 0px;
}
.nested-row {
  display: flex;
  padding: 20px;
  background-color: blue;
  justify-content: space-between;
  color: white;
}

.nested-child {
  border: solid white 1px;
}

.truncated {
  overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
  border: solid white 1px;
  min-width: 0;
}

.regular {
  flex-shrink: 0;
}

<div class="rows">
  <div class="child">
    <div class='nested-row'>
      <div class="nested-child truncated">
        I want this text to truncate but it breaks on a small screen
      </div>
      <div class='nested-child regular'>
        Now this doesn't wrap
      </div>
    </div>
  </div>
  <div class="child">
    Some other content
  </div>
  <div class="child">
    Some other content
  </div>
  <div class="child">
    Some other content
  </div>
</div>

Answer 2

问题是白色空间属性。您可以像这样编辑样式表。

.truncated {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: wrap;
}