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:
.classname{_x000D_
width:250px;_x000D_
overflow:hidden;_x000D_
text-overflow:ellipsis;_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
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_
Source: Stackoverflow.com