Получить только текст с многоточием, используя jquery

Хороший код, просто интересно, можно ли запросить и получить текст с многоточием (т.е. с точками, а не с исходным текстом)?

Если я добавлю текст

Это длинное предложение

и (используя соответствующий css для многоточия) он сокращается до

Это долгий посыл...

Есть ли способ получить текст

"This is a long sen ..."

из объекта $("p") DOM, а не из исходного текста?


javascript jquery ellipsis
person ejectamenta    schedule 13.01.2014    source источник
comment
Вы имеете в виду при использовании text-overflow: ellipsis? Нет, CSS добавляет их по мере необходимости; на самом деле они не являются частью DOM и поэтому не могут быть вычислены с помощью JavaScript.   -  person Blazemonger    schedule 13.01.2014
comment
Какой хороший код вы имеете в виду?   -  person Yuriy Galanter    schedule 13.01.2014
comment
Я думаю, что @Blazemonger, вероятно, прав, но зачем вам это вообще нужно? Возможно, есть способ обойти ваше требование.   -  person Matt Burland    schedule 13.01.2014
comment
да, используя, например, text-overflow: ellipsis в css, просто интересно, могут ли другие библиотеки с многоточием, такие как dotdotdot, достичь этого   -  person ejectamenta    schedule 13.01.2014
comment
Я хочу сделать pdf (jsPDF) из моего html, и если css уже проделал хорошую работу по сокращению текста в соответствии с доступным пространством, я хотел бы получить сокращенный текст. Поскольку это PDF-файл фиксированного размера, я, вероятно, в основном могу использовать полноразмерный текст, но, возможно, иногда текст не помещается, а затем в PDF-файле он также не помещается в пространство контейнера.   -  person ejectamenta    schedule 13.01.2014
comment
Даже если это устарело, на вопрос был дан ответ ЗДЕСЬ . И это РАБОТАЕТ ДЛЯ КАЖДОГО БРАУЗЕРА   -  person Proto    schedule 21.07.2017
comment
Proto - это не работает, текст, скопированный в новый элемент, представляет собой тот же самый текст полной длины, а не сокращенную версию эллипса jsfiddle .net/orecgujz   -  person ejectamenta    schedule 24.07.2017

Ответы (2)


arrow_upward
0
arrow_downward

У меня есть черновой проект, который нуждается в настройке для конкретного браузера .

JavaScript:

jQuery.fn.getShowingText = function () {
    // Add temporary element for measuring character widths
    $('body').append('<div id="Test" style="padding:0;border:0;height:auto;width:auto;position:absolute;display:none;"></div>');
    var longString = $(this).text();
    var eleWidth = $(this).innerWidth();
    var totalWidth = 0;
    var totalString = '';
    var finished = false;
    var ellipWidth = $('#Test').html('&hellip;').innerWidth();
    var offset = 7; // seems to differ based on browser (6 for Chrome and 7 for Firefox?)
    for (var i = 0;
    (i < longString.length) && ((totalWidth) < (eleWidth-offset)); i++) {
        $('#Test').text(longString.charAt(i));
        totalWidth += $('#Test').innerWidth();
        totalString += longString.charAt(i);
        if(i+1 === longString.length)
        {
            finished = true;
        }
    }
    $('body').remove('#Test'); // Clean up temporary element
    if(finished === false)
    {
        return totalString.substring(0,totalString.length-3)+"…";
    }
    else
    {
        return longString;
    }
}
console.log($('#ellDiv').getShowingText());

CSS:

#Test {
    padding:0;
    border:0;
    height: auto;
    width: auto;
    position:absolute;
    white-space: pre;
}
div {
    width: 100px;
    white-space: nowrap;
    border: 1px solid #000;
    overflow:hidden;
    text-overflow:ellipsis;
    padding:0;
}

С оговоркой, что offset должен меняться в зависимости от браузера, если кто-то не может понять, что его вызывает.

Подозреваю letter-spacing или подобное?

person Alex W    schedule 13.01.2014
comment
Нет jsfiddle.net/j08691/axHs8/2. Все, что я сделал, это добавил пробелы к слову в div. - person j08691; 13.01.2014

arrow_upward
1
arrow_downward

Попробуй это:

function getEllipsis(command, characters) {
	for (var i = command.length; i >= 0; i--) {
		if (command.substring(0, i).length < characters) {
			if (i < command.length) {
				command = command.substring(0, i) + "...";
			}
			return command;
		}
	}
}
console.log(getEllipsis("I am a long sentence",16))
console.log(getEllipsis("But I am even longer",20))

person Woold    schedule 25.03.2020