Make the text within the CSS style of ".well" wrap around the width

Question

I am looking to style the width of a .well class to be in proportion with the text inside a simple textbox that it contains.

What is the best approach to achieve this sizing using CSS?

Answer 1

Answer №1

What do you think about this code snippet?

.well{display: inline-block;}

For instance:

.well{
  display: inline-block;
  background: gold;
}
.textbox{
  background: skyblue;
}

<div class="well">
  well
  <div class="textbox">textbox</div>
</div>

Answer 2

What do you think about this code snippet?

.well{display: inline-block;}

For instance:

.well{
  display: inline-block;
  background: gold;
}
.textbox{
  background: skyblue;
}

<div class="well">
  well
  <div class="textbox">textbox</div>
</div>

Answer 3

To ensure the box maintains a maximum width, implement the max-width property within the style:

.container{width:auto; max-width:250px;}

By applying this to the class, you can achieve the desired result.

Answer 4

To ensure the box maintains a maximum width, implement the max-width property within the style:

.container{width:auto; max-width:250px;}

By applying this to the class, you can achieve the desired result.

Answer 5

In my opinion, it is best to utilize the Textarea element so that the text automatically wraps within the width of the textarea field.

<textarea rows="5"></textarea>

Answer 6

In my opinion, it is best to utilize the Textarea element so that the text automatically wraps within the width of the textarea field.

<textarea rows="5"></textarea>