Make text wrap around and not increase width

Question

I have a div, and inside is a textarea and a 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>

I want my div.instructions to wrap around and not increase the width of my div.innotate.

I'm quite stumped on this. I know display: inline isn't what I need, and setting the width manually is not an option.

I want the textarea to decide the width. That means that the width of my parent div should be at most the width of my textarea.

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

Answer 1

I was searching for an answer for this question and found that another way to do this with out setting any min/max width to the container div is to add

max-width: fit-content

to the div around the text. And add

display: inline-block

to the container around the text and the textarea

<style type="text/css">
  .innotate-form {
    display: inline-block;
  }

  .instructions {
    max-width: fit-content;
  }
</style>

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

Answer 2

Used flex box for this one, had to throw width into .innotate-form for good measure.

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

er. wait. You are physically setting the width of the text area at "cols" = 30. One good turn deserves another. When you set the width of the text area, set the width of .instructions to match. In fact, lets do it one better, all without JS.

see http://jsfiddle.net/8fo6by8d/5/

Lose the 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;
}

And if you're upset at having to type in a width twice there is always

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

Answer 4

use this CSS

.innotate-form .instructions {

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

}

Answer 5

Also with flex, but German's didn't seem to work. This one uses a container instead. The text doesn't wrap, though. It just sizes with the container.

.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

EDIT: I researched more and found CSS3's resize property. This will make any div behave like a text area, so it will squish the text. I used flex to make the text area occupy the entire area of the div, then disabled resizing on the actual 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;
}