how to show limited text in css

Question

I have text like this in HTML:

 <p>text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text</p>

Is it possible to make it like this:

text texttext texttext texttext text.....

use CSS3 Vertical ellipsis; http://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css — m-t, Jan 13 '15 at 10:29
possible duplicate of [Truncating long strings with CSS: feasible yet?](http://stackoverflow.com/questions/802175/truncating-long-strings-with-css-feasible-yet) — Mike Chamberlain, Jul 03 '15 at 13:26

score 2 · Answer 1 · answered Jan 13 '15 at 10:28

2

Demo: http://cssdeck.com/labs/otf9h9pn

HTML:

<p class="ellipsis">text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext</p>

CSS:

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  width: 20em;
}

answered Jan 13 '15 at 10:28

Samuli Hakoniemi

18,740
1
61
74

1

The OP requires a JS solution (see comments) – U r s u s Jan 13 '15 at 10:32

score 1 · Accepted Answer · answered Jan 13 '15 at 10:28

1

Apply below CSS style for <p> tag.

p{
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

JSFIDDLE DEMO

answered Jan 13 '15 at 10:28

shanidkv

1,118
1
9
12

The OP requires a JS solution (see comments) – U r s u s Jan 13 '15 at 10:29

score 0 · Answer 3 · edited Jan 13 '15 at 11:25

0

yeah that's possible with ellipsis

dl dt {
    text-overflow: ellipsis;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
}

edited Jan 13 '15 at 11:25

Murtaza Khursheed Hussain

15,176
7
58
83

answered Jan 13 '15 at 10:28

ikkez

2,052
11
20

The OP requires a JS solution (see comments) – U r s u s Jan 13 '15 at 10:31

U r s u s · Answer 4 · 2015-01-13T10:45:56.237

Here's what I use for my projects. You need JQuery.

How it works: assign the class .more to the div containing your text.

Check my DEMO

JQUERY

$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100;  // How many characters are shown by default
var ellipsestext = "...";
var moretext = "Show more >";
var lesstext = "Show less";


$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});

HTML

 <html>
     <head>
    <title>jQuery Read More/Less Toggle Example</title>
  </head>
  <body>
    <span class="more">
      Lorem ipsum dolor sit amet, consectetur adipisicing 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.
    </span>

  </body>
</html>

CSS

    .morecontent span {
    display: none;
}
.morelink {
    display: block;
}

score 0 · Answer 5 · edited Jul 03 '15 at 13:19

0

Yes, this is possible.

For a single line of text use text-overflow:ellipsis;, like so

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

(Source CSS-Tricks)

For multi-line text it gets trickier. Check out this link http://html5hub.com/ellipse-my-text/

Personally for multi-line text I used a jQuery plugin, called dotdotdot.

edited Jul 03 '15 at 13:19

Mo.

26,306
36
159
225

answered Jan 13 '15 at 10:29

Daniel Apt

2,468
1
21
34

score 0 · Answer 6 · answered Jul 03 '15 at 14:46

It is possible to do in pure JavaScript with substring()

var str = document.getElementById("longlist").innerHTML;
document.getElementById("shorten").innerHTML = str.substring(0,36)+".....";

<strong>Actual text</strong>
<p id="longlist">text texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext texttext text</p>
<hr />
<strong>Result:</strong>
<p id="shorten"></p>

how to show limited text in css

6 Answers6

Linked