如何使具有冗长文本值的 div 响应而不溢出父元素边界

Question

我试图使

.right

元素变得灵活，以便它可以扩展或收缩以填充剩余的父元素宽度，而不会超过它或导致

.icon

超出父元素边框。它需要具有响应能力，因为宽度会根据移动设备方向而变化。正如您在我当前的代码中看到的，它导致父元素溢出。

仅使用纯 HTML/CSS 可以吗？ （没有图书馆）

section {
  display: flex;
  border: 3px solid red;
  margin: 0 auto;
  width: 200px;

  & .left {
    background: dodgerblue;
    padding: 5px;
    color: #fff;
  }

  & .right {
    background: green;
    color: #fff;
    padding: 5px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  & .icon {
    padding: 5px;
    color: #fff;
    background: orange;
  }
}

<section>
  <div class="left">
    Left
  </div>
  <div class="right">
    Right Lots-Of-Text-Data
  </div>
  <div class="icon">
    Icon
  </div>
</section>

Answer 1

您需要将

overflow: hidden

添加到截断的元素中。

section {
  display: flex;
  border: 3px solid red;
  margin: 0 auto;
  width: 200px;
}

section .left {
  background: dodgerblue;
  padding: 5px;
  color: #fff;
}

section .right {
  background: green;
  color: #fff;
  padding: 5px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

section .icon {
  padding: 5px;
  color: #fff;
  background: orange;
}

<section>
  <div class="left">
    Left
  </div>
  <div class="right">
    Right Lots-Of-Text-Data
  </div>
  <div class="icon">
    Icon
  </div>
</section>