Как я могу получить доступ к фактическому тексту, отображаемому в DIV, при использовании стиля CSS overflow: hidden?

На моей странице есть следующий контент DIV, который отображает динамический текст:

<div id="someContent">
</div>

Он использует следующий CSS для обрезки дополнительного текста:

#someContent {
    height: 200px;
    width: 200px;
    overflow: hidden;
}

Если я загружу этот текст в DIV:

"Lorem ipsum dolor sit amet, conctetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, в nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, felis porttitor. blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum " / em>

... CSS заставляет отображать только следующий текст в DIV:

"Lorem ipsum dolor sit amet, conctetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, в nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, felis porttitor. blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue "

Это работает, как ожидалось.

Однако мне было интересно, есть ли способ получить доступ к отображаемому тексту с помощью JavaScript. Когда я пытаюсь получить доступ к свойству innerHTML DIV, он возвращает весь текст, изначально загруженный в DIV.

<script type="text/javascript">
    alert(document.getElementById("mainArticleContent").innerHTML);
</script>

Моя конечная цель - заменить последнее слово в обрезанном содержимом многоточием ("..."). Я решил, что могу сделать это в JavaScript, чтобы он отображался во всех браузерах, а не только в IE, как в CSS-свойстве text-overflow: hidden.

Любые идеи? Это возможно?


javascript text html css overflow
person Eric Belair    schedule 22.04.2009    source источник

Ответы (7)


arrow_upward
3
arrow_downward

Я не думаю, что то, что вы просите сделать, возможно с помощью javascript.

В качестве альтернативы, почему бы не обрезать текст на стороне сервера с определенным количеством символов? Вероятно, у вас не будет необходимого вам контроля над размером блока div, отображаемого на странице, в зависимости от выбранного вами шрифта, но это должно решить вашу проблему.

Редактировать:

Взгляните на this, чтобы получить автоматическое многоточие CSS. Есть несколько предостережений, и это выглядит довольно специфичным для браузера, но это еще один способ сделать то, что вы хотите.

person Dave L    schedule 22.04.2009

arrow_upward
2
arrow_downward

Этот сайт объясняет метод, который может быть полезен для получения отображаемой части текста. Я не уверен, насколько точным будет этот метод, но я подозреваю, что он поможет вам достаточно близко к тому, что вы хотите: http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

person kbosak    schedule 22.04.2009

arrow_upward
2
arrow_downward

Вот небольшая мысль об использовании jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var innerText = $('#someContent').text();
    var textArray = innerText.split('');
    var formatted = '';
    for(var i in textArray) {
        formatted += '<span>' + textArray[i] + '</span>';
    }
    var heightOfContainer = $('#someContent').height();
    $('#someContent').html(formatted);
    var clipped = '';
    $('#someContent span').each(function(){
        if ($(this).position().top < heightOfContainer) {
            clipped += $(this).text();
        } else {
            return false;
        }
    });
    clipped += '...';
    $('#someContent').html(clipped);
});
</script>
person Jerph    schedule 22.04.2009

arrow_upward
1
arrow_downward

Нет простого способа сделать это. Вы должны рассчитать, сколько текста может быть видно в DIV на основе размера div, размера шрифта, типа шрифта и смещения текста внутри div. Помните, что вы можете использовать отрицательное смещение, чтобы показать разные части текста.

Вы должны уметь вычислить алгоритм вычисления того, сколько текста может содержать DIV, на основе всех этих чисел, но это немного сложно из-за переноса строк.

person Maiku Mori    schedule 22.04.2009

arrow_upward
1
arrow_downward

Для использования многоточия нет необходимости использовать Javascript. Вы можете просто использовать свойство CSS text-overflow и установить для него значение «многоточие». Вы можете найти документацию здесь.

И если вы хотите, чтобы это было после нескольких строк, тогда посоветуйте это руководство.

person Dimitris Damilos    schedule 08.08.2017
comment
Автор спросил, как получить текст. То, что вы говорите, - это стилизовать его. Кстати, указанная ссылка не работает. - person Yen NQ; 08.04.2021

arrow_upward
0
arrow_downward

Вы можете сделать такое же усечение на основе количества символов на стороне клиента. Сохраните усеченную часть в каком-нибудь другом элементе DOM (или в своем собственном атрибуте, если вы не против такого рода вещей). Настройте все для запуска body.onLoad ().

person Damo    schedule 22.04.2009

arrow_upward
0
arrow_downward

Если это просто для целей отображения, вы можете просто иметь абсолютно позиционированный div с "..." в правом нижнем углу контейнера, то есть поверх текста.

person Paul C. Shirley    schedule 30.01.2013