Have Geek Brain

Cut off the text before reading further

I have texts that fit in a div most of the time, but sometimes that doesn't fit. Can't figure out how many characters / words / paragraphs fit into the div, so I can't seem to turn that off.

The div had a fixed height and width, so what can we do about it? Or do you have some suggestion how to get everything in a div, the right way?

+2


a source to share


5 answers


If the text doesn't fit you can use css elipses to make it look a little cleaner. Maybe put your text in a hidden element and measure the height to see if you need to add a link (more).



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

+9


a source


Yes, you can do something about it. Ask a div

question overflow: hidden

. Then set the height div

to a few multiples line-height

(this will depend on how many lines you want to show), so you shouldn't crop the bottom parts of your text.



0


a source


You can use different overflow values ​​in css, "auto" should cause the scrollbar to appear when the text is larger than the height / width, or "hidden" to disable it.

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

0


a source


Using this class is the best way to solve a problem like this:

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


a source


I wrote a truncation function in JavaScript that starts with a block of text, and if it detects an overflow (scrollheight > height)

, it starts removing words until it matches, and then adds a "view more" link.

-1


a source






More articles:


All Articles