Can I completely hide lines of text that are half cut off?

Question

If I place a body of text into a container with a set height and hidden overflow, I will often end up with the final line that could fit being cut off. Example jsFiddle or image:

Is there a way to have that line not appear entirely rather than have this happen?

The scenario is that I have columns which are a dynamic height (100% of the parent height, which is 80% of the body height) containing blog-post text and I want to display a "read all" at the bottom if there is overflowing text (easy to determine). At the moment it just looks terrible with half rendered text sitting above it.

I can't remove the overflow as the columns need to end before the navigation, which sits at the bottom of the page.

Answer 1

You can inspire you from the property text-overflow but you have to do it with JavaScript for multiples lines: http://pvdspek.github.com/jquery.autoellipsis/ (via With CSS, use "..." for overflowed block of multi-lines)

Answer 2

see this is my code below

 <li style="color: Black; font-weight: bold; oveflow:hidden; line-height: 1.2em;height: 2.6em; ">Page Size
                    <select id="ddlOrderstoDisplay" style="width: 50px;">
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="75">75</option>
                        <option value="100">100</option>
                        <option value="150">150</option>
                    </select>               
                </li>

I Put these lines inside the tag it will work on all browser .Hope it will help for you

**overflow: hidden;
line-height: 1.2em;
height: 3.6em;**