Benim CSS'im:
#content_right_head span
{
display:inline-block;
width:180px;
overflow:hidden !important;
}
Şimdi içerik içeriği gösteriliyor
Ama şunu göstermek istiyorum. içerik içeriği ...
İçeriklerden sonra noktaları göstermem gerekiyor. İçerikler veritabanından dinamik olarak geliyor.
Bunun için text-overflow: ellipsis;
özelliğini kullanabilirsiniz. Bu şekilde yazın
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](
)Bunu dene,
.truncate {
display:inline-block;
width:180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
elemanınıza .truncate
sınıfını ekleyin.
EDIT,
Yukarıdaki çözüm tüm tarayıcılarda çalışmıyor. çapraz tarayıcı desteği ile aşağıdaki jQuery eklentisini deneyebilirsiniz.
(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);
Nasıl arayacağımı,
$("#content_right_head span").ellipsis();