Как мога да получа достъп до действителния текст, който се показва в DIV, когато използвам CSS style overflow: hidden?

Имам следното съдържание DIV на моята страница, което показва динамичен текст:

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

Той използва следния CSS, за да отреже допълнителен текст:

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

Ако заредя този текст в DIV:

"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam 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 et sapien vehicula nonummy. Suspendisse potenti."< /em>

... CSS кара само следния текст да се показва в DIV:

"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, 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.

Някакви идеи? Възможно ли е това?


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

Отговори (7)


arrow_upward
3
arrow_downward

Не мисля, че това, което искате да направите, е възможно с javascript.

Като алтернатива, защо не съкратите текста при определен брой символи от страна на сървъра? Вероятно няма да имате желания контрол върху размера на div, показван на страницата, в зависимост от шрифта, който сте избрали, но това трябва да реши проблема ви.

Редактиране:

Разгледайте това, за да получите автоматично 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