html - 强制文本在没有宽度的情况下换行到 div 中

Question

是否可以在只有最小宽度的行内 block 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 .