Jump to content

inline-block nowrap that respects borders


ala888
 Share

Recommended Posts

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

 

CtTv44J.png

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...