How can I show dots ("...") in a span with hidden overflow?

If you are using text-overflow:ellipsis, the browser will show the contents whatever possible within that container. But if you want to specifiy the number of letters before the dots or strip some contents and add dots, you can use the below function.

function add3Dots(string, limit)
{
  var dots = "...";
  if(string.length > limit)
  {
    // you can also use substr instead of substring
    string = string.substring(0,limit) + dots;
  }
 
    return string;
}

call like

add3Dots("Hello World",9);

outputs

Hello Wor...

See it in action here

function add3Dots(string, limit)
{
  var dots = "...";
  if(string.length > limit)
  {
    // you can also use substr instead of substring
    string = string.substring(0,limit) + dots;
  }

    return string;
}



console.log(add3Dots("Hello, how are you doing today?", 10));

text-overflow: ellipsis only working if you show 1 line. If more, you can use display: -webkit-box property in case you want to show more 1 line. code bellow for 2 lines.

#content_right_head span {
  line-height: 1.6rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-height: 3.2rem;
}

<div id="content_right_head">
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
</div>

I think you are looking for text-overflow: ellipsis in combination with white-space: nowrap

See some more details here

Try this,

.truncate {
    display:inline-block;
    width:180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

add .truncate class to your element.

EDIT,

Above solution is not working in all the browsers. you can try following jQuery plugin with cross browser support.

(function ($) {
    $.fn.ellipsis = function () {
        return this.eachAsync({
            delay: 100,
            bulk: 0,
            loop: function (index) {
                var el = $(this);

                if (el.data("fullText") !== undefined) {
                    el.html(el.data("fullText"));
                } else {
                    el.data("fullText", el.html());
                }

                if (el.css("overflow") == "hidden") {
                    var text = el.html();
                    var t = $(this.cloneNode(true))
                                        .hide()
                                        .css('position', 'absolute')
                                        .css('overflow', 'visible')
                                        .width('auto')
                                        .height(el.height())
                                        ;

                    el.after(t);

                    function width() { return t.width() > el.width(); };

                    var func = width;
                    while (text.length > 0 && width()) {
                        text = text.substr(0, text.length - text.length * 25 / 100);
                        t.html(text + "...");
                    }

                    el.html(t.html());
                    t.remove();
                }
            }
        });
    };
})(jQuery);

how to call,

$("#content_right_head span").ellipsis();

Well, the "text-overflow: ellipsis" worked for me, but just if my limit was based on 'width', I has needed a solution that can be applied on lines ( on the'height' instead the 'width' ) so I did this script:

function listLimit (elm, line){
    var maxHeight = parseInt(elm.css('line-Height'))*line;

    while(elm.height() > maxHeight){
        var text = elm.text();
        elm.text(text.substring(0,text.length-10)).text(elm.text()+'...');
    }
}

And when I must, for example, that my h3 has only 2 lines I do :

$('h3').each(function(){
   listLimit ($(this), 2)
})

I dunno if that was the best practice for performance needs, but worked for me.

You can try this:

.classname{
    width:250px;
    overflow:hidden;
    text-overflow:ellipsis;
}

<div class="classname">the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.  the quick brown fox jumps over the lazy dog.</div>

 var tooLong = document.getElementById("longText").value;
    if (tooLong.length() > 18){
        $('#longText').css('text-overflow', 'ellipsis');
    }

Putting it all together wrapping the content while adding the …

.truncate {
 overflow-y: hidden;
 text-overflow: ellipsis;
 display: 
  -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
 max-height: 3.2rem;
}

You could wrap your truncate class with another height limiting wrapper.

.wrapper {
  padding: 0%;
  margin: 0px 2%;
  max-height: 81em;
  overflow-y: clip;  # or scroll / hidden
}

HTML

<div class="wrapper">
  <div class="truncate">
    Lorem ipsum
  <div>
  <div class="truncate">
    Lorem ipsum
  <div>    
<div>

[1] Reference solution with text-overflow : https://stackoverflow.com/a/11426321/4474165

[2] Reference solution truncating after multiple lines with line-clamp : https://stackoverflow.com/a/67052438/4474165

First of all you make a div tag set width and inside it make p tag then add text to it and apply the code given below. As your p tag will reach width of div tag "..." will be applied.

-

List item

`div > p{
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;}`