Add 3 dots in multiline text for reed more with Css Crossbrowser way

Question

I had a multiline text that needed to be truncated.I tried this code but it is not working with multiline with one line it is working

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;

Help me to find a Crossbrowser Solution because with this code it is working only on Chrome

white-space: normal;
  word-wrap: break-word;
  -webkit-line-clamp: 9;
 -moz-line-clamp: 9;
 -o-line-clamp: 9;
 -ms-line-clamp: 9;
  display: -webkit-box;

possible duplicate of [text-overflow:ellipsis in Firefox 4? (and FF5)](http://stackoverflow.com/questions/4927257/text-overflowellipsis-in-firefox-4-and-ff5) — giorgio, Mar 30 '15 at 12:00
yeah or try this one; https://github.com/josephschmitt/Clamp.js . Anyway, this is a typical example of use google please... there are tons of answers out there. — giorgio, Mar 30 '15 at 12:10
http://dotdotdot.frebsite.nl/, this plugin will do your work. I have used it many times. — Puneet, Mar 30 '15 at 12:17
@Puneet I uploaded the js file it added the style word-wrap: break-word; but it didnt work for me and didnt added 3 dots.Can you help me with? — Anahit Ghazaryan, Mar 30 '15 at 12:29
@AnahitGhazaryan, the plugin works when you have specified the fix height of the content. Have you specified the height? — Puneet, Mar 30 '15 at 12:41
@AnahitGhazaryan I have created a fiddle for you. Please have a look. http://jsfiddle.net/5tgjcj4d/ — Puneet, Mar 30 '15 at 13:04
Just for the record, your CSS is ordered incorrectly. The standard should always be at the bottom when using vendor prefixes — Rick Calder, Apr 13 '15 at 20:47

score 1 · Answer 1 · answered Mar 30 '15 at 13:02

Here is a cross-browser solution using :after. Only little caveat is you must specify a line-height or the ellipsis looks off in IE. This is tested in IE10, FF, Chrome & Safari.

FIDDLE - http://jsfiddle.net/ez8w3u0o/4/

HTML:

<div class="too-much-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum       
</div>

CSS:

.too-much-text {
    float: left;
    display: block;
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    line-height: 20px;
}
.too-much-text:after {
     position: absolute;
     right: 0;
     bottom: 0;
     background-color: #fff;
     content: "...";
     text-align: left;
     width: 50px;  
     line-height: 20px;
}

Thank you @Matt Whiteley! this is also a solution – Anahit Ghazaryan Mar 30 '15 at 13:18 — Anahit Ghazaryan, Mar 30 '15 at 13:18

score 1 · Accepted Answer · edited Apr 13 '15 at 20:41

1

I found a better cross-browser solution. I used this http://mikeking.io/succinct/ and all is working fine!

Example usage: <p class="truncate">some long text here</p>

<script>
    $(function(){
        $('.truncate').succinct({
            size: 120
        });
    });
</script>

The entire Succinct jQuery plugin code is available here: https://github.com/micjamking/succinct/blob/master/jQuery.succinct.js

edited Apr 13 '15 at 20:41

Luke

18,811
16
99
115

answered Mar 30 '15 at 13:47

Anahit Ghazaryan

664
10
23

That's a neat little solution. It does add an additional script to the page and is limited to choosing number of characters, but looks very clean and simple! Good find. – Matt Whiteley Mar 30 '15 at 14:34
Thank you @MattWhiteley.Yes I agree with you. – Anahit Ghazaryan Mar 30 '15 at 19:23

Add 3 dots in multiline text for reed more with Css Crossbrowser way

2 Answers2