Jump to content
ala888

inline-block nowrap that respects borders

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...