Odpowiedzi:
Do tego możesz użyć text-overflow: ellipsis;
własności. Pisz w ten sposób
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>
Jeśli używasz text-overflow: ellipsis, przeglądarka pokaże zawartość, jaka jest możliwa w tym kontenerze. Ale jeśli chcesz określić liczbę liter przed kropkami lub usunąć część zawartości i dodać kropki, możesz użyć poniższej funkcji.
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;
}
zadzwoń jak
add3Dots("Hello World",9);
wyjścia
Hello Wor...
Zobacz to w akcji tutaj
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));
Spróbuj tego,
.truncate {
display:inline-block;
width:180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
dodaj .truncate
klasę do swojego elementu.
EDYCJA ,
Powyższe rozwiązanie nie działa we wszystkich przeglądarkach. możesz wypróbować wtyczkę jQuery z obsługą wielu przeglądarek.
(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);
jak zadzwonić,
$("#content_right_head span").ellipsis();
width
nieruchomość może być 100%
. Myślę, że tak jest lepiej: .truncate { display:inline-block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
Cóż, „przepełnienie tekstu: wielokropek” zadziałało dla mnie, ale jeśli mój limit był oparty na „szerokości”, potrzebowałem rozwiązania, które można zastosować na liniach (na „wysokości” zamiast „szerokości”), więc Zrobiłem ten skrypt:
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()+'...');
}
}
A kiedy muszę na przykład, że moja h3 ma tylko 2 linie, robię:
$('h3').each(function(){
listLimit ($(this), 2)
})
Nie wiem, czy to była najlepsza praktyka dla potrzeb wydajności, ale zadziałała dla mnie.
Możesz spróbować tego:
.classname{
width:250px;
overflow:hidden;
text-overflow:ellipsis;
}
Wielkie dzięki @sandeep za odpowiedź.
Mój problem polegał na tym, że chcę pokazać / ukryć tekst na rozpiętości za pomocą kliknięcia myszą. Tak więc domyślnie wyświetlany jest krótki tekst z kropkami, a po kliknięciu pojawia się długi tekst. Ponowne kliknięcie ukrywa ten długi tekst i ponownie pokazuje krótki.
Całkiem prosta rzecz: po prostu dodaj / usuń klasę z przepełnieniem tekstu: wielokropek.
HTML:
<span class="spanShortText cursorPointer" onclick="fInventoryShippingReceiving.ShowHideTextOnSpan(this);">Some really long description here</span>
CSS (taki sam jak @sandeep z dodanym .cursorPointer)
.spanShortText {
display: inline-block;
width: 100px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}
.cursorPointer {
cursor: pointer;
}
Część JQuery - po prostu usuwa / dodaje klasę cSpanShortText.
function ShowHideTextOnSpan(element) {
var cSpanShortText = 'spanShortText';
var $el = $(element);
if ($el.hasClass(cSpanShortText)) {
$el.removeClass(cSpanShortText)
} else {
$el.addClass(cSpanShortText);
}
}