Text-overflow is not working

Question

Details :

I have problem in css text-overflow. Actually my div contains large text content but I want it to display only four lines and I want to remove this overlapping content. How could I achieve this?

My overlapping content

overlapping div

CSS Code :

.divclass {
    width:90%;
    display: block;
    float: right; 
    text-overflow: ellipsis;
    overflow:hidden;
}

try to specify height – Anand Natarajan Mar 11 '14 at 10:26 — Anand Natarajan, Mar 11 '14 at 10:26
providing a jsfiddle link would be a 'plus' – A. Wolff Mar 11 '14 at 10:30 — A. Wolff, Mar 11 '14 at 10:30
possible dupe: http://stackoverflow.com/q/6222616/703717 – Danield Mar 11 '14 at 12:37 — Danield, Mar 11 '14 at 12:37

score 2 · Accepted Answer · answered Mar 11 '14 at 10:29

2

You can't use pure css text-overflow with multi-line text (sorry)

You'd be best using something like dotdotdot:

$(document).ready(function() {
    $(".divclass").dotdotdot();
});

answered Mar 11 '14 at 10:29

Richard Peck

76,116
9
93
147

ok i will try this but is that possible to achieve this without using jquery? – kamesh Mar 11 '14 at 10:35
The only way would be to limit the height of the div using `max-height: 30px;` – Richard Peck Mar 11 '14 at 10:36

score 1 · Answer 2 · answered Mar 11 '14 at 12:26

1

As a curiosity, it can be done with webkit browsers:

display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;

answered Mar 11 '14 at 12:26

Samuli Hakoniemi

18,740
1
61
74

score 0 · Answer 3 · answered Mar 11 '14 at 10:27

0

You can use sub string in javascript or try this:

Sample:

var strings = 'Text contents';
if(strings.length > 10) 
strings = strings.substring(0,10);

answered Mar 11 '14 at 10:27

Abhi · Answer 4 · 2014-03-11T10:54:10.947

0

Give your .divclass a specified height

 .divclass { max-height: 150px; }

or whatever max-height your four lines require

edited Mar 11 '14 at 10:54

answered Mar 11 '14 at 10:28

Abhi

350
1
4
13

@Ahni i agree with you but i have one question . if suppose i increase my font-size again same problem will come right? – kamesh Mar 11 '14 at 10:56
Yes, increasing the font-size will eventually make the text behave the same way it is behaving now, if it exceeds the height boundries. Better keep a particular font-size for this div. – Abhi Mar 11 '14 at 11:10

score 0 · Answer 5 · answered Mar 11 '14 at 10:39

0

try this white-space:nowrap;

.divclass {
width:90%;
display: block;
float: right; 
text-overflow: ellipsis;
overflow:hidden;
white-space:nowrap; 
}

answered Mar 11 '14 at 10:39

Anand Natarajan

1,172
8
7

In your code only one line is displaying but i want to display first four lines and at the end of the fourth line '...' – kamesh Mar 11 '14 at 11:00

score -1 · Answer 6 · answered Mar 11 '14 at 10:45

-1

Use this, It's work without jQuery

.divclass {
            height:25px;
            overflow:hidden;
            width:50%;
            text-overflow:ellipsis;
            display:block;
            white-space:nowrap;
        }

answered Mar 11 '14 at 10:45

Jagdish

1
1

Text-overflow is not working

6 Answers6