强制文本在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和input是inline-block所以它们保持在同一条线上，但是div.alert是block，因此它出现在该场的其他内容下面的新线上。
2. div.field只有MIN-WIDTH（不是宽度或最大宽度），因为当用户调整窗口大小（以及div.container的宽度）时，应该发生以下情况： 一个。如果字段的固定宽度内联内容（在本例中为LABEL + INPUT = 300px）小于div.container宽度的25％，那么div.field应该恰好是容器宽度的25％。 湾如果字段的固定宽度内联内容超过容器的25％，那么它们应该将字段推出到它们的组合宽度。

那么，有没有办法让div.alert根据上面的规则根据场的宽度进行换行？

Answer 1

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

.field {
    width: min-content;
}

这说，你的容器收缩到尽可能少。要使用它，您必须确保标签和输入在其最小宽度处足够大。但是他们的固定尺寸已经完成了。但在这种情况下，多个字段，它们将彼此相邻包裹，所以我建议

.container {
    width: min-content;
}

这是一个jsfiddle。

它不是完全跨浏览器，而是almost。

我发现它here。

Answer 2

不是没有jQuery，比如：

$('.alert').width($('.alert').parents('.field').width());