强制文本在没有宽度的 div 内换行

Question

是否可以在只有最小宽度的内联块 div 内进行文本换行？（不是宽度，也不是最大宽度）

这就是我的意思：

<style type="text/css">

  .container {
    width:100%;
  }

  .field {
    display: inline-block;
    vertical-align: top;
    min-width:25%;
  }

  label, input {
    display: inline-block;
  }

  .alert {
    display:block;
  }

</style>


<div class="container">

    <div class="field">
      <label style="width:100px;">My Label</label>
      <input style="width:200px;" type="text" />
      <div class="alert">
        This text should wrap at whatever width div.field actually is, and never push div.field out to the width of this text!
      </div>
  </div>

  <div class="field">...another field...</div>
  <div class="field">...another field...</div>
  <div class="field">...another field...</div>
  etc...

</div>

笔记：

1. &是为了使它们保持在同一行，但它会出现在字段其他内容下方的新行上label。inputinline-blockdiv.alertblock

2. div.field只有 MIN-WIDTH （不是宽度或最大宽度），因为当用户调整窗口大小（以及 的宽度div.container）时，应该发生以下情况：

   A。如果字段的固定宽度内联内容（在本例中为 LABEL+INPUT=300px）小于 宽度的 25% div.container，则应div.field恰好为容器宽度的 25%。

   b. 如果字段的固定宽度内联内容超过容器的 25%，那么它们应该将字段推出到其组合宽度。

那么，有没有办法div.alert按照上面的规则，根据字段的宽度进行换行呢？

Answer 1

我知道我是一个非常老的线程，但它可能对其他人有帮助。有

.field {
    width: min-content;
}

也就是说，您的容器会收缩到尽可能少的程度。为了使用它，您必须确保标签和输入在其最小宽度下足够大。但由于它们的大小是固定的，所以就完成了。但在这种情况下，如果有多个字段，它们将彼此相邻包装，所以我建议

.container {
    width: min-content;
}

这是一个jsfiddle。

它不完全是跨浏览器的，但几乎是。

我在这里找到的。

Answer 2

我正在寻找这个问题的答案，发现文本周围的 div 需要有：

max-width: fit-content

<style type="text/css">
  .container {
    width: 100%;
  }
  
  .field {
    display: inline-block;
    vertical-align: top;
    min-width: 25%;
    margin-bottom: 20px;
  }
  
  label,
  input {
    display: inline-block;
  }
  
  .alert {
    display: block;
    max-width: fit-content;
  }
</style>


<div class="container">
  <div class="field">
    <div>With:</div>
    <label style="width:100px;">My Label</label>
    <input style="width:200px;" type="text" />
    <div class="alert">
      This text should wrap at whatever width div.field actually is, and never push div.field out to the width of this text!
    </div>
  </div>
  <div class="field">
    <div>Without:</div>
    <label style="width:100px;">My Label</label>
    <input style="width:200px;" type="text" />
    <div>
      This text should wrap at whatever width div.field actually is, and never push div.field out to the width of this text!
    </div>
  </div>
</div>