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.