强制文本在没有宽度的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>

注意：

>

标签

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

b、 如果字段的固定宽度内联内容超过容器的25%，则应将字段推出到其组合宽度。

那么，有没有办法获得div。警告根据上述规则根据字段宽度进行换行？

Answer 1

我正在搜索这个问题的答案，发现文本周围的div需要有:

最大宽度：适合内容

<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>

Answer 2

没有jQuery就不行，比如：

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

Answer 3

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

.field {
    width: min-content;
}

也就是说，你的容器尽可能缩小。要使用它，你必须确保标签和输入在最小宽度时足够大。但是有了固定的尺寸，就完成了。但是在这种有多个字段的情况下，它们会被一个接一个地包装起来，所以我建议

.container {
    width: min-content;
}

这是一个jsfiddle。

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

我在这里找到的。