Как я могу получить доступ к фактическому тексту, который отображается в DIV при использовании переполнения стиля CSS: скрытый? - PullRequest
Новая
       14

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

4 голосов
/ 22 апреля 2009

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

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

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

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

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

"Lorem ipsum dolor sit amet, прослуживший элиты. Эликсир Praesent, justo convallis luctus rutrum, erat nulla fermentum diam, в nonummy quam ante ac quam. Maecenas urna purus, идентификатор fermentum, портвейн, товар, товар felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus aude condimentum adipiscing. Aenean sagittis. Этим leo pede, rhoncus venenatis, трилистик в, вульпутный, односторонний и здоровый образ жизни. . "

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

"Lorem ipsum dolor sit amet, посвященный адептированию элит. Praisent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, в nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestitor in Goods, товары felis. Nam 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.

Есть идеи? Это возможно?

Ответы [ 7 ]

3 голосов
/ 22 апреля 2009

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

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

Edit:

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

2 голосов
/ 22 апреля 2009

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

1 голос
/ 08 августа 2017

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

А если вы хотите иметь его после нескольких строк, посоветуйте это руководство .

1 голос
/ 22 апреля 2009

Вот краткая мысль, используя 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>
1 голос
/ 22 апреля 2009

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

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

0 голосов
/ 31 января 2013

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

0 голосов
/ 22 апреля 2009

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

...