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:

enter image description here

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.

score 1 · Accepted Answer · edited May 23 '17 at 12:32

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)

edited May 23 '17 at 12:32

Community

1
1

answered Aug 29 '12 at 10:14

LeBen

1,884
12
21

3

Is there any solution that doesn't include jquery? – Onza May 04 '16 at 08:33

score 1 · Answer 2 · edited Aug 20 '13 at 06:16

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;**

score 0 · Answer 3 · answered Aug 29 '12 at 10:02

0

You can increase or decrease the line-height

according to your comfort

answered Aug 29 '12 at 10:02

supersaiyan

1,670
5
16
36

How would I dynamically set the appropriate `line-height`? Also, this would probably not look too great from the angle of consistency when there are 5 columns on-screen with different line-heights. – Marty Aug 29 '12 at 10:04
i am not getting.. why your are giving diffrent line-height ?? all 5 columns should have same line height – supersaiyan Aug 29 '12 at 10:11
Ah true, though that still brings me to the problem of working out what the line-height should be in a dynamic space. – Marty Aug 29 '12 at 23:27

score 0 · Answer 4 · answered Aug 29 '12 at 10:06

0

Remove overflow:hidden

div
{
    width: 100px;
    height: 92px;
    background: black;
    color: white;
}

answered Aug 29 '12 at 10:06

Jitender

7,593
30
104
210

score 0 · Answer 5 · answered May 25 '16 at 10:44

0

just add 'column-width' attribute, it will work. in your example it will column-width:100px

answered May 25 '16 at 10:44

Nauman Sharif

205
2
12

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

5 Answers5

Linked