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.

For this you can use text-overflow: ellipsis; property. Write like this

span {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

<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>

JSFiddle

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

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

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.

line-height: 1.6rem;
overflow: hidden;
display: -webkit-box; 
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
max-height: 3.2rem;

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;
}

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

If you're using ES6, it could be make with ternary operator and template literals

function add3Dots(text, limit)
{
    return text.length > limit ? `${text.substring(0, limit)}...` : text;
}

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;}` 

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