Question

我有一个div，里面是textarea和div：

<div class="innotate">
        <div class="innotate-form">
          <div class="">
            <textarea cols="30" rows="3" name="body"></textarea>
          </div>
          <div class="instructions">Some Text that is quite long but should wrap instead of lengthening the div</div>
        </div>
      </div>

我希望我的div.instructions能够环绕而不会增加div.innotate的宽度。

我对此感到非常难过。我知道display: inline不是我需要的，手动设置宽度不是一种选择。

我希望textarea决定宽度。这意味着我的父div的宽度最多应该是我的textarea的宽度。

http://jsfiddle.net/8fo6by8d/1/

Answer 1

对于这个使用弹性框，必须将宽度投入.innotate-form以获得良好的衡量标准。

.innotate-form {
  display: flex
  flex-wrap: wrap;
  width: 14em;
  margin-top: 3px;
  background-color: rgba(249,249,249,0.9);
  border: 1px solid #eee;
  padding: 12.5px;
  z-index: 9999;
}

The fiddle

Answer 2

ER。等待。您实际上将文本区域的宽度设置为“cols”= 30.一个好的转弯值得另一个。设置文本区域的宽度时，请将.instructions的宽度设置为匹配。事实上，让我们做得更好，所有没有JS。

请参阅http://jsfiddle.net/8fo6by8d/5/

丢失col = setting

<div class="innotate">
    <div class="innotate-form">
        <div class="">
            <textarea  rows="3" name="body"></textarea>
        </div>
        <div class="instructions">Some Text that is quite long but should wrap instead of lengthening the div</div>
    </div>
</div>

CSS：

.innotate-form {
  margin-top: 3px;
  background-color: rgba(249,249,249,0.9);
  border: 1px solid #eee;
  padding: 12.5px;
  position: absolute;
  z-index: 9999;
}
.innotate-form .instructions {
  font-size: 14px;
  color: #f20;
    width: 250px;
    padding: 5px;
}

textarea {
    width: 250px;
    height: 120px;
    border: 3px solid #cccccc;
    padding: 5px;
}

如果你不得不输入两次宽度，那么总是

textarea, .innotate-form .instructions{
    width: 250px;
    padding: 5px;
}

Answer 3

还有弹性，但德国人似乎没有用。这个使用容器代替。但是，文本没有包装。它只是容器的大小。

.container {
    display: flex;
    flex-wrap: wrap;
}
.innotate-form {
    flex: 1;
    margin-top: 3px;
    background-color: rgba(249, 249, 249, 0.9);
    border: 1px solid #eee;
    padding: 12.5px;
}
.instructions {
    font-size: 14px;
    color: #f20;
}
textarea {
    width: 100%;
}

JSFiddle

编辑：我研究了更多，发现了CSS3的resize属性。这将使任何div表现得像文本区域，因此它会挤压文本。我使用flex来使文本区域占据div的整个区域，然后在实际 textarea上禁用大小调整。

Can I Use?

JSFiddle

* {
    box-sizing: border-box;
}
.container {
    display: flex;
    -webkit-resize: both;
    -moz-resize: both;
    resize: both;
    overflow: auto;
    width: 400px;
    height:300px;
    background: darkorange;
    padding: 1em;
}
.innotate {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    padding: 1em;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #FFF;
}
.instructions {
    padding: 1em;
    font-size: 16px;
    color: red;
}
textarea {
    flex: 1;
    width: 100%;
    resize: none;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #FFF;
}

Answer 4

使用此CSS

.innotate-form .instructions {

font-size: 14px;
color: #f20;
min-width: 250px;
max-width: 250px;
padding: 5px;
word-break: break-all;

}

使文字环绕并且不增加宽度

4 个答案: