Замените слишком длинные строки на "..."

Допустим, что мы имеем <div style="width:100px;">This text is too long to fit</div>

Текст в div является динамическим. И я хотел бы заставить текст поместиться в ширину и не сломаться. Поэтому мне нужна какая-то функциональность, чтобы проверить, подходит ли текст, и если это не так, я бы хотел отобразить часть текста, который действительно подходит. И добавьте ... в конец.

Результат для слишком длинного текста должен выглядеть примерно так: "This text is..."

Есть ли какой-то стандартный способ делать то, что я хочу? Или javascript, jquery, jsp или java?

Спасибо!

Изменить: Спасибо за ваши быстрые ответы! Я делал это в java, угадывая, сколько символов подходит. Это казалось менее оптимальным решением, поэтому я пришел сюда.

Решение css идеально подходит для меня. Это не такая большая сделка, что она не работает для firefox, так как все мои клиенты все равно используют.:)

Ответы

Ответ 1

вы можете сделать это с помощью css3, используя text-overflow:ellipsis http://www.css3.com/css-text-overflow/

или если вы настаиваете на использовании способа js, вы можете обернуть текст node внутри своего div и затем сравнить ширину обертки с родительским элементом.

Ответ 2

если вы хотите обработать данные, вы можете использовать функцию:

function TextAbstract(text, length) {
    if (text == null) {
        return "";
    }
    if (text.length <= length) {
        return text;
    }
    text = text.substring(0, length);
    last = text.lastIndexOf(" ");
    text = text.substring(0, last);
    return text + "...";
}

text = "I am not the shortest string of a short lenth with all these cows in here cows cows cows cows";

alert(TextAbstract(text,20));

EDIT: обработать все div с избыточной длиной в тексте:

    var maxlengthwanted=20;

    $('div').each(function(){
        if ($('div').text().length > maxlengthwanted)
            $(this).text(TextAbstract($(this).text()));
    });

Ответ 3

if(text.length > number_of_characters) {
   text = text.substring(from, to);
}

Ответ 5

Если вы добавите тег id в div, вы можете использовать document.getElementById("divid").innerHTML, чтобы получить содержимое div. Оттуда вы можете использовать .length, чтобы получить длину строки. Если длина строки превышает определенный порог, просто возьмите подстроку и добавьте "...".

Однако вы должны попытаться сделать это на стороне сервера. Опираясь на Javascript/CSS, чтобы правильно отформатировать его для пользователя, это не идеальное решение.

Ответ 6

Попробуйте CSS text-overflow свойство.

Ответ 7

Более вероятная ситуация заключается в том, что вы не можете знать, сколько символов будет соответствовать элементу dom, поскольку у него есть свой собственный шрифт и т.д. CSS3 в настоящее время не вариант (для меня в любом случае). Итак, я создаю немного div offscreen и держу тестовые строки в нем до тех пор, пока ширина не будет правильной:

var text = 'Try to fit this text into 100 pixels!';
var max_width = 100;

var test = document.createElement('div');
test.className = 'Same Class as your real element';  // give it the same font, etc as a normal button
test.style.width = 'auto';
test.style.position = 'absolute';
test.style.left = '-2000px';
document.body.appendChild(test);            
test.innerHTML = text;

if ($(test).width() > max_width) {

    for (var i=text.length; i >= 0; i--) {
        test.innerHTML = text.substring(0, i) + '...';
        if ($(test).width() <= max_width) {
            text = text.substring(0, i) + '...';
            break;
        }
    }
}

document.body.removeChild(test);