Crop HTML text to set size WITHOUT showing parts of letters

How do I set a box (an HTML DIV) to only display part of the text in it, WITHOUT cutting off letters vertically?
The contents include a <h2> and often an unordered list (a <ul>) with <li>s.  I only want to show the
text that will fit in a box, cutting off everything lower than the set height of the box.

Note that there is no way of reliably predicting what the text will be.

I am using ColdFusion and would be happy for a solution that uses that OR Javascript OR CSS.
LVL 2
icy118Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
You mean
<div style="height:200px; overflow:hidden">
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
azadisaryevCommented:
yes, since your text includes html tags, which makes it very hard to abbreviate it without possiby cutting it in the middle of a tag, you best bet is to set a fixed height and overflow=hidden on your div, like mplungjan suggested.

for cases when you do not have html tags in your text, or you strip them out, cflib.org has several udfs you could use, like addbreviate, for example.

Azadi
0
icy118Author Commented:
But with a fixed height and overflow (which is, by the way, my current solution) there's no guarantee that the elements inside will have specific heights.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Michel PlungjanIT ExpertCommented:
You cannot have your cake and eat it too :)
0
eejonesCommented:
Can you make all your text elements fixed height? That is, use css lineheight (or other property) to set and therefore be able to predict where the line breaks are in your text? I am assuming there would be only one <h2> element, and the <li> elements could be made to have a standard height. If <h2> lineheight is 15 pixels high, and each list item lineheight is 12 pixels high, you could make your div height 15 + (some multiple of 12). The css lineheight property adds the specified bit of whitespace to the top and bottom of the text, e.g. your font-size is 8px and your lineheight is 12px so you know the letter plus the whitespace above and below it will be 12px. (You would probably want a lineheight that is 120% or so of your font-size.)
0
eejonesCommented:
Use CSS to make a fixed line-height for all of the text inside the div.
Use CSS to set the div to a fixed height that is an even multiple of your line-height.

You could paste this code into a .html document and try it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
h2 {font-size:14px;line-height:40px;margin:0;padding:0;}
.mytext {font-size:12px;line-height:20px}
</style>
</head>
<body>
<!--- Make the div height some multiple of your line-height which is set to 20px in the CSS above. --->
<div class="mytext" style="height:240px;overflow:auto;border:solid 1px magenta;padding:0;">
<h2>This is the Title</h2>
hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>
hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>
hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>
hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>
</div>
</body>
</html>
0
eejonesCommented:
Obviously if there is any padding inside your <div> you would  have to add that into your calculation of the div height.
0
eejonesCommented:
Last post I promise. I forgot you have lists in your code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h2 {font-size:14px;line-height:40px;margin:0;padding:0;}
.mytext, li {font-size:12px;line-height:20px;margin:0;padding:0;}
ul {line-height:20px;list-style-type:lower-alpha;border:solid 1px orange;margin:20px 20px 20px 20px;padding:20px 20px 20px 20px;}
</style>
</head>
<body>
<!--- Make the div height some multiple of your line-height which is 20px --->
<div class="mytext" style="height:240px;overflow:auto;border:dotted 1px magenta;padding:0;">
<h2>This is the Title</h2>
hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>hello kitty
<ul>
<li>dogs</li>
<li>ducks</li>
<li>goats</li>
<li>dogs</li>
<li>ducks</li>
<li>goats</li>
<li>dogs</li>
<li>ducks</li>
<li>goats</li>
</ul>
hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>
hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>
hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>
hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>
hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>hello kitty<br>
</ul>
</div>
</body>
</html>
0
GaryCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.