1

子弹性项目超出了父容器的宽度。我也尝试设置 min-width:0 但仍然无法正常工作。

这是我的 HTML 和 CSS 代码：

.parent{
  display: flex;
  border: 2px solid red;
}

.child1{
  background: cyan;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
}

.child2 {
  background: pink;
  height: 20px;
  width: 20px;
}

.child3 {
  background: yellow;
  height: 20px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class='parent'>
  <div class='child1'>1</div>
  <div>
    <div class='child2'>2</div>
    <div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.</div>
  </div>
</div>

我的动机是防止child3溢出父容器并在溢出时显示省略号（...）。

任何帮助表示赞赏。

4

3 回答 3

3

您发布的内容存在一些问题，但不要担心我们可以解决您的问题。

什么是弹性，什么不是

首先让我们看看你的标记：

.parent是一个带有 的元素display: flex。根据您的命名，我们可能会错误地假设它的孩子是：

  • .child1,
  • .child2， 和
  • .child3.

……但事实并非如此。

的孩子.parent实际上是：

  • .child1， 和
  • 一个无阶级的div。

classlessdiv没有为它设置样式，因此.child2也.child3没有定位在 flexbox 上下文中。因此，您的min-width: 0on.child3并不能解决您的问题，因为该解决方案仅适用于 flex 孩子。

min-width在正确的上下文中应用

首先，让我们给那个孩子div上课：.foo.

.foo本身有一个块显示，但目前它允许内容 (in .child3) 溢出。我们要防止溢出的正是这个元素：

.foo {
  min-width: 0;
}

这应该就是你所需要的。看来您已经熟悉我们为什么使用它min-width来帮助解决这个问题，但以防万一您可以在CSS 技巧：Flexbox 和截断文本中阅读到它。

解决方案

以下是所有这些放在一起。

.parent {
  display: flex;
  border: 2px solid red;
}

.foo {
  min-width: 0;
  outline: 1px solid rebeccapurple;
}

.child1 {
  background: cyan;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
}

.child2 {
  background: pink;
  height: 20px;
  width: 20px;
}

.child3 {
  background: yellow;
  height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
<div class='parent'>
  <div class='child1'>1</div>
  <div class="foo">
    <div class='child2'>2</div>
    <div class='child3'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.
    </div>
  </div>
</div>

于 2020-08-26T16:35:01.903 回答
2

正如我在评论中所说，您没有任何限制 child-3 div 的长度。你min-width:0不会有任何影响，因为这只是说 div 可以占用它想要的尽可能多的空间。

child-3（child-2顺便说一句）没有任何父级，因此没有什么可以限制它，因此它使用了所有可用的宽度。

你需要给孩子一个弹性父母，overflow:hidden然后设置它的宽度限制。假设您想要相同的父类型，您可以执行以下操作：

更新：下面的代码，您可以使用相同的parent类来包装您的 child-2 和 child-3，使其行为方式相同：

.parent {
  display: flex;
  border: 2px solid red;
  overflow: hidden;
}

.child1 {
  background: cyan;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
}

.child2 {
  background: pink;
  height: 20px;
  width: 20px;
}

.child3 {
  background: yellow;
  height: 20px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class='parent'>
  <div class='child1'>1</div>
  <div class='parent'>
    <div class='child2'>2</div>
    <div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat
      elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper
      orci erat eu orci.
    </div>
  </div>
</div>

于 2020-08-26T16:29:11.740 回答
2

如果您想要完全相同的结果：

.parent{
  display: flex;
  border: 2px solid red;
}

.child1{
  background: cyan;
  height: 40px;
  width: 40px;
  flex-shrink: 0;
}
.child-wrapper{
  display:flex;
  flex-direction: column;
  overflow: hidden;
}
.child2 {
  background: pink;
  height: 20px;
  width: 20px;
}

.child3 {
  background: yellow;
  height: 20px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class='parent'>
  <div class='child1'>1</div>
  <div class='child-wrapper'>
    <div class='child2'>2</div>
    <div class='child3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus sagittis odio, ac pulvinar tortor sagittis et. In hac habitasse platea dictumst. Phasellus ut velit dolor. Vestibulum pulvinar orci libero, in aliquet arcu auctor non. Morbi volutpat elit id lacus cursus, at imperdiet tellus eleifend. Morbi euismod vehicula urna, sed pretium felis ullamcorper vitae. Nunc at ligula a odio eleifend convallis eget sed orci. Praesent fermentum, sem in congue tempus, ex diam suscipit neque, in ullamcorper orci erat eu orci.</div>
  </div>
</div>

于 2020-08-26T16:30:44.917 回答