flex 容器中的项目溢出 x 轴中的父元素

Posted 2023-03-05

【中文标题】flex 容器中的项目溢出 x 轴中的父元素

【英文标题】：Items in flex container overflows parrent element in x-axes

【发布时间】：2021-12-08 22:22:19

【问题描述】：

当芯片内容太长时，我想在芯片内应用省略号。但目前芯片溢出容器。

示例代码在这里：https://codepen.io/SebastianBusek/pen/OJjbQRP

<div class="container">
  <div class="chip">
    <span class="chip__label">This is a chip, chip, chip, chip, chip, chip, chip, chip, chip, chip, chip!</span>
  </div>
  <div class="chip">
    <span class="chip__label">Chip & Dale </span>
  </div>
</div>

.container 
  border: 1px solid red;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 300px;


.chip 
  box-sizing: border-box;
  display: inline-flex;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  border: 1px solid black;
  margin-right: auto;
  /* margin-right: 0; */
  margin-bottom: 8px;


.chip__label 
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-left: 16px;
  padding-right: 16px;
  color: blue;

【参考方案1】：

在父级上使用“flex-wrap”，这会将项目包装到下一行

【参考方案2】：

删除以下 CSS 属性：

height: 32px 来自.chip

white-space: nowrap 来自.chip__label