CODEWITHSUNDEEP
htmlcsstextspace
Alex Slack
Alex Slack

Reputation: 71

Auto resizing div with max width

I'm trying to create a div for text that resizes the width depending on how much text is in the div, but also has a maximum width, thus splitting the text into multiple lines if it exceeds the max-width. The text does resize with one line of text and split when there's too much, but when there's more than one line a large space appears inside the div between the right edge of the text and the border.

enter image description here

HTML:

<div class="balloon">
  This is sample text. This is a second sentence.
</div>

CSS:

.balloon {
  background: #FFF;
  border: solid 2px;
  display: inline-block;
  max-width: 225px;
}

Here's a demo to demonstrate what I mean: http://jsfiddle.net/oft3n5wg/

Any ideas about how to fix this?

Upvotes: 2

Views: 358

Answers (2)

Tohir
Tohir

Reputation: 142

Your content goes in here

The whole idea is specifying a max-width and also sett

Upvotes: 0

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

your updated fiddle

This is just because the first word on the 2nd line is too large to fit in that space your have highlighted in red. Replace the word "second" with "seco" and you'll see that it fits

you can add a text-align: center so that the space doesn't look as bad if you want, or do letter-spacing: 1px so there's more space between the letters and it will fill the white spaces a bit more

Upvotes: 1

Related Questions