仅在 space 限制需要时才伸缩，不要分配不需要的 space

Question

这是我要实现的目标：

A. 只要有空间，项目就应该占据它们的原生 space:

但是如果我们运行空间不足，我们不希望溢出：

B. 相反，在他们之间分配可用的 space：

C.但是不要把不需要的space分配给不需要的单元格；即短词应该只占用他们需要的 space，释放 space 分配给更长的词：

理想情况下我想同时满足A&C，但我至少需要满足A&B。做AorC并不难，但我不不知道如何使用相同的标记来完成这两项操作。

下面是我用来生成这些图像的片段。请注意，我通过硬编码特定于单词的最大大小来实现 "C"，因为我不知道如何在 CSS 中为任意单词实现该行为。

    div {
        border: 2px solid blue;
        padding: .1rem;
        margin: .1rem;
    }
    .parent {
        display: flex;
        width: 600px;
        margin-bottom: 1rem;
    }
    .child {
    }
    .test-2 > .child {
      flex: 1 0 0px;
      text-overflow: ellipsis;
      overflow: hidden;
    }

<ol type="A">
    <li>
        Items should take up their native space as long as there is room for them:
        <div class="parent">
            <div class="child">apple</div>
            <div class="child">counterintelligence</div>
            <div class="child">orange</div>
            <div class="child">antidisestablishmentarianism</div>
            <div class="child">tangerine</div>
        </div>

        But if we run out of room, we don't want overflow:
        <div class="parent">
            <div class="child">apple</div>
            <div class="child">counterintelligence</div>
            <div class="child">orange</div>
            <div class="child">antidisestablishmentarianism</div>
            <div class="child">tangerine</div>
            <div class="child">duck</div>
            <div class="child">counterproductivenes</div>
            <div class="child">test</div>
            <div class="child">hyperventilation</div>
        </div>
    </li>


    <li>
        Instead, distribute the available space between them:
        <div class="parent test-2">
            <div class="child">apple</div>
            <div class="child">counterintelligence</div>
            <div class="child">orange</div>
            <div class="child">antidisestablishmentarianism</div>
            <div class="child">tangerine</div>
            <div class="child">duck</div>
            <div class="child">counterproductivenes</div>
            <div class="child">test</div>
            <div class="child">hyperventilation</div>
        </div>
    </li>


    <li>
        But don't allocate unnecessary space to cells that don't need it; i.e. short words should only take the space they need, freeing up space to be distributed to longer words:
        <div class="parent test-2">
            <!-- note: I'm pulling this off by hardcoding max widths to the cells I
                know contain short text, but I need this to work automatically with
                arbitrary text -->
                <div class="child" style="max-width: 5ch">apple</div>
                <div class="child">counterintelligence</div>
                <div class="child" style="max-width: 6ch">orange</div>
                <div class="child">antidisestablishmentarianism</div>
                <div class="child" style="max-width: 8ch">tangerine</div>
                <div class="child" style="max-width: 4ch">duck</div>
                <div class="child">counterproductivenes</div>
                <div class="child" style="max-width: 3ch">test</div>
                <div class="child">hyperventilation</div>
        </div>
    </li>
<ol>

Answer 1

您可以使用 parent div 内的内联网格来完成此操作，其中包含 child div 并将 grid-auto-flow 设置为 [=13] =].

div {
  border: 2px solid blue;
  padding: .1rem;
  margin: .1rem;
}

.parent {
  width: 600px;
  margin-bottom: 1rem;
}

.intermediate {
  display: inline-grid;
  grid-auto-flow: column;
  max-width: 100%;
  border: none;
  padding: 0;
  margin: 0;
}

.child {
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="parent">
  <div class="intermediate">
    <div class="child">apple</div>
    <div class="child">counterintelligence</div>
    <div class="child">orange</div>
    <div class="child">antidisestablishmentarianism</div>
    <div class="child">tangerine</div>
  </div>
</div>

<div class="parent">
  <div class="intermediate">
    <div class="child">apple</div>
    <div class="child">counterintelligence</div>
    <div class="child">orange</div>
    <div class="child">antidisestablishmentarianism</div>
    <div class="child">tangerine</div>
    <div class="child">duck</div>
    <div class="child">counterproductivenes</div>
    <div class="child">test</div>
    <div class="child">hyperventilation</div>
  </div>
</div>

仅在 space 限制需要时才伸缩，不要分配不需要的 space

Flex only when space limitations require it, and don't allocate unneeded space

html

css

overflow

flexbox