CSS 空白 nowrap 扩展 Flexbox 的子宽度

Question

我正在学习 CSS，但遇到了文本溢出的问题。我有一个带两个孩子的弹性盒子。我希望子 2 适合其父级，如果文本内容太长，则文本内容将被剪切。但是当我添加white-space: nowrap到文本时，child-2 宽度会扩展。我在这里做错了什么？

.parent {
  display: flex;
  flex-wrap: nowrap;
  max-width: 200px;
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid black;
}

.child-1 {
  white-space: nowrap;
  border: 1px solid black;
  margin-right: 20px;
}

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}

<div class="parent">
<div class="child-1">This is child 1</div>
<div class="child-2">
  <div class="text">A really long long long long text</div>
  <div class="text">Another really long long long long text</div>
</div>
</div>

Answer 1

这就是它的white-space: nowrap作用 - 它阻止文本在空白处中断并换行。

您的.parent最大宽度设置为：200px，因此 child-2 无法增长到适合较长的文本，并且单行太长，无法容纳 child-1 旁边的空间，因此它必须延伸到父级之外 -它无处可去。

我想你想要做的是隐藏从父级延伸出来的文本部分？

为此，您可以overflow隐藏任何延伸到 child-2 div 之外的内容，如下所示：

.child-2 { overflow:hidden; }

在此处查看有关溢出属性的更多信息：Mozilla MDN Web Docs

隐藏溢出的示例：

.child-2 { overflow:hidden; }

.parent {
  display: flex;
  flex-wrap: nowrap;
  max-width: 200px;
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid black;
}
.child-2{
  overflow:hidden;
}

.child-1 {
  white-space: nowrap;
  border: 1px solid black;
  margin-right: 20px;
}

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid red;
}