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

My CSS:

#content_right_head span
{
  display:inline-block;
  width:180px;
  overflow:hidden !important;
}

Now it's showing content content

But I want to show like content content ...

I need to show dots after contents. Contents are coming dynamically from database.

This question is related to html css

The answer is


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.


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();

Thanks a lot @sandeep for his answer.

My problem was that I want to show / hide text on span with mouse click. So by default short text with dots is shown and by clicking long text appears. Clicking again hides that long text and shows short one again.

Quite easy thing to do: just add / remove class with text-overflow:ellipsis.

HTML:

<span class="spanShortText cursorPointer"  onclick="fInventoryShippingReceiving.ShowHideTextOnSpan(this);">Some really long description here</span>

CSS (same as @sandeep with .cursorPointer added)

.spanShortText {
  display: inline-block;
  width: 100px;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.cursorPointer {
  cursor: pointer;
}

JQuery part - basically just removes / adds class cSpanShortText.

  function ShowHideTextOnSpan(element) {
    var cSpanShortText = 'spanShortText';
    var $el = $(element);
    if ($el.hasClass(cSpanShortText)) {
      $el.removeClass(cSpanShortText)
    } else {
      $el.addClass(cSpanShortText);
    }
  }

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

See some more details here


You can try this:

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


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

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

_x000D_
_x000D_
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));
_x000D_
_x000D_
_x000D_