1

I've included everything I know, overflow hidden, word-wrap, height, width, max-width, but the long sentences still spill out of the container.

Here is a jsfiddle > http://jsfiddle.net/acrane/2nhzmx1o/

below is the css of the div the text is spilling out of. It's part of a nav hover that pops up.

.nav-info, .nav-info-fixed {
width: 100%;
position: absolute;
top: 0%;
background-color: #fff;
border-radius: 10px;
z-index: 1000;
height:100%; 
overflow: hidden;
word-wrap: break-word;
margin: 0 0 10px 0;
background-color: rgba(255,255,255,.8);
color: #000;
}

UPDATED EDIT I didn't want to use ellipsis, I wanted my words to wrap, the solution and links to jsfiddles are in the comments below the accepted answer.

acrane
  • 45
  • 1
  • 8

1 Answers1

0

You have no issue with the overflow. If you set the text-overflow to ellipsis you will see, that the text is correctly cropped. Only the fact, that your container does not have a padding in combination with the border-round is the reason why this looks like an issue.

Check this out for a better general understanding

riddy
  • 501
  • 1
  • 4
  • 17
  • You're right, the ellipsis works as expected. I added padding to my jsfiddle > [link](http://jsfiddle.net/acrane/2nhzmx1o/17/) but I don't want ellipsis, I want the words to carry down to the next line like every other div does. – acrane Sep 19 '14 at 13:47
  • so you DO want it to be wrapped? than you need whitespace: normal, see http://jsfiddle.net/zwfyr2w0/ – riddy Sep 19 '14 at 13:53
  • Oh, perfect! Thanks. That does it. I had never really used whitespace, I'll have to read up on it. Thank you. How can I check the correct answer with this comment attached? – acrane Sep 19 '14 at 14:09
  • there should be an arrow below the answer-rating ;) thanks and good luck – riddy Sep 19 '14 at 14:13