I have a div like so

<div id="description">
    <p>A load of text,A load of text,A load of text.</p>

the load of text can be varying in length can be anything from 10 characters to 100,000 characters and what I'd like to do is fix the height of that div to some pixel value i.e. 330px for agruments sake and show a "click more..." link

I've seen there are a quite a few plugins that allow you to truncate the text based on the character count of the text, but none specifically allow you to specify the height of the div instead. I can't really use this method of truncation as it's not as reliable due to fonts being different heights and widths.

two plugins that i've seen at these:


Html Truncator

Anyone have any suggestions on other plugins I could try to specify the height of the div? or am I looking at writing one from scratch?

3 answers


how do you fill that div? with PHP?

Because then it would be way easier to just set a character cap. something like google does when you google a result, the description of a page has a 60 charactercap if im not mistaken.

Just try this in your output:

<div id="description">
    <?php echo strlen($content)>250?substr($content,0,250).'... <a href="link_to_full_content">Read more.</a>':$content;
Answered about 8 years ago by Menno Geelen

Nothing in JavaScript is ever going to accurately calculate the height of a glyph on the user's screen, so this will always be a guessing game that you're very likely to lose more often than not. The most effective solutions tend to revolve around inserting a single line of dummy text into an element and then basing all further calculations on the resulting height of said element.

Answered about 8 years ago by Nathan Duran

You should be able to achieve something like this in pure CSS by using a combination of line-height and em units for your div. Here's a simplified version.

#container {
    font-size: 10px; /* A nice round unit to work with */
    line-height: 1.5; /* Makes every line of text 1.5 times font-size (15px if the user hasn't resized text in the browser) */
    height: 3em; /* Makes the container's height equal 2 lines of text (30px if not resized) */
    overflow: hidden; /* Prevents overflowing text from being seen */

The downside to this is that the height isn't pixel based, and the container will grow/shrink to fit the text size if the user changes from the default. Consequently, it may not work for all designs.

The upside is that since the height is always tied to font size it won't ever cut into the middle of a line of text.

All you need to do next is add a JS "read more" link outside of the container which will switch the container's height to auto, and perhaps toggle it back to your original height.

Answered about 8 years ago by Joshua Clanton
  • The em is not a measurement of height. Nathan Duran about 8 years ago
  • The em is a relative unit which can be used to specify width or height. (And are quite frequently used this way in "elastic layouts.") If you are referring to something else, let me know and I'll be happy to take your response into account. Joshua Clanton about 8 years ago
  • Nathan, take a look here: http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css "So, in CSS, an em is actually a vertical measurement. One em equals the vertical space needed for any given letter in a font, regardless of the horizontal space it occupies. Therefore: If the font size is 16px, then 1em = 16px." Joshua Clanton about 8 years ago