强制文本在div中包装,没有宽度

时间:2012-09-28 04:15:40

标签: html css word-wrap

是否可以在仅具有最小宽度的内联块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&amp; inputinline-block,因此它们保持在同一行,但div.alertblock,以便它显示在该字段其他内容下方的新行上。
  2. div.field只有MIN-WIDTH(不是宽度或最大宽度),因为当用户调整窗口大小(以及div.container的宽度)时,应该发生以下情况:

    一个。如果字段的固定宽度内联内容(在本例中为LABEL + INPUT = 300px)小于div.container宽度的25%,那么div.field应该恰好是容器宽度的25%。

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

  3. 那么,有没有办法让div.alert根据上面的规则根据字段的宽度进行换行?

2 个答案:

答案 0 :(得分:1)

不是没有jQuery,比如:

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

答案 1 :(得分:1)

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

.field {
    width: min-content;
}

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

.container {
    width: min-content;
}

这是jsfiddle

这不是完全跨浏览器,而是almost

我发现它here