css - 截断嵌套 flex 元素内的文本

Question

我有一个嵌套的 flex 容器，当它不够宽无法显示时我想截断它的文本 ( https://codepen.io/BigMike/pen/mmMxQN )。

我想要什么

(大屏幕)

(截断的小屏幕)

我以为我可以用

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

但是当我缩小屏幕时， child 会到达一个不会再变小的点。

有什么建议吗？

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>