Cut off text before read more

I have texts that most of the time fit in a div, but sometimes it doesn't fit. Th开发者_如何学运维ere is no way to determine how many characters/words/paragraphs fit in the div, so I can't cut it off that way.

The div had a fixed height and width, so can we do something with that? Or do you have any suggestion how to get everything in the div, the correct way?

If the text isnt going to fit, you could use a css elipses to make it look a bit cleaner. Perhaps place the text in a hidden element and measure the height to see if you need to include a (more) link.

See http://mattsnider.com/css/css-string-truncation-with-ellipsis/

Yes, you can do something with that. Give the div in question an overflow: hidden. Then set the div height to some multiple of the line-height (this will depend on how many lines you want to show) so you make sure to not cut off the bottom portions of your text.

You can use different overflow values in css, "auto" should cause a scrollbar to appear when text is bigger than the height/width will allow, or "hidden" to cut it off.

see: http://www.quirksmode.org/css/overflow.html

Using this class is the best way of solving such problem:

.truncate {
  width: 200px;      // Here you can also use ems as measure of width
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

I've written a truncate function in JavaScript that starts with the block of text and if it detects overflow (scrollheight > height) it starts removing words until it fits, then adds a "view more" link.