inline-block nowrap that respects borders

[ala888]

when I use a block div with word-wrap:break-word;

I get one giant section of text that automatically wraps around itself upon nearing the edges to the next line.

 

However, I would like to make it so that if the text is really short, there isn't just a big giant colored background behind it. So I made it

a inline-block instead. In order to prevent the Inline-block from wrapping to the next line, I used "white-space:nowrap" but now the divdoesn't even respect the borders, it just keeps on going indefinitely

 

[ala888]

basically Im asking: "how do I set a max-width property that respects the parent elements borders?" not max-width:100%, but something along the lines max-width: whatever space is left in the line

[Day]

Can you send a link to your page or attach your html/css?

[Mikasa Ackerman]

You already read this suggestion in a PM, but I wanted to post it here in case it helps anyone else.

 

Sorry, I cant post in the forum yet. Here's the answer to your question: Instead of using whitespace and display properties, use float and clear. IE use something like this:div{float:left; clear:both;}Here's a codepen to show you how it works: http://codepen.io/anon/pen/tzvmD