Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как разбить текст на части определенного размера? (https://javascript.ru/forum/misc/13626-kak-razbit-tekst-na-chasti-opredelennogo-razmera.html)

R.I.P.er 06.12.2010 23:58

как разбить текст на части определенного размера?
 
есть текст,который надо поместить в div-контейнер определенного размера, но точно известно что, весь он туда не влезет. задача: разбить текст на части под размер контейнера и чтоб потом этими частями можно было манипулировать.
всё никак способ придумать не могу((

monolithed 07.12.2010 00:12

Для чего это вам нужно, возможно есть решение более эстетичное?!

R.I.P.er 07.12.2010 08:28

Ну вообще-то изначально предполагалось, что контент будет листаться (не прокручиваться) в контейнере каким-либо зайтейливым образом.

monolithed 07.12.2010 08:35

Допустим, для чего придумывать такой извращенный способ?

ksa 07.12.2010 09:15

Цитата:

Сообщение от R.I.P.er
предполагалось, что контент будет листаться (не прокручиваться)

Насколько много этого самого контента? Это гольный текст? Сколько тогда в нём символов?

Aetae 07.12.2010 19:58

Вообще если нужно листать, то имхо просто нужно поставить контейнеру owerflow:hidden; и скролить его содержимое по нажатию клавиши на всю величину:
<div id="e" style="overflow:hidden;font:12/14px;width:300px;height:140px;border:1px solid #000;float:left">
В 1797, в десятилетнем возрасте стал студентом Франсуа Девьенна и Иоганна Георга Вундерлиха в Парижской консерватории. В те времена каждый флейтист, желавший получить диплом об окончании консерватории, должен был выиграть первый приз на ежегодном конкурсе флейтистов, и Гийю добился его в 1805 г. С 1816 г. Гийю — придворный музыкант короля Людовика XVIII, а в 1822—1826 годах солист оркестра Гранд-Опера. С 1819 по 1829 гг. Гийю профессор Парижской консерватории. Среди его учеников Луи Дорюс.

Гийю был весьма обеспеченным человеком, однако какие-то значительные финансовые проблемы возникли в его жизни, и к концу 1820-х Гийю потерял все состояние. С 1829 он вынужденно начал активно гастролировать по Европе и, в конечном счете, с 1831 года навсегда обосновался в Санкт-Петербурге.
</div>
<input type="button" value="&lt;" onclick="scroll(1)">
<input type="button" value="&gt;" onclick="scroll()">
<script type="text/javascript">
function scroll(up) {document.getElementById('e').scrollTop+=up?-140:140;}
</script>


А разбивка на куски нужна только в кранйих случаях ибо красивой реализации не получится. ну разве что с моноширинным шрифтом, и то весьма не надёжно.

R.I.P.er 07.12.2010 20:33

Цитата:

Сообщение от monolithed (Сообщение 82631)
Допустим, для чего придумывать такой извращенный способ?

да вот, дизайнерская задумка такая. сразу оговорюсь, не моя)

Цитата:

Сообщение от ksa (Сообщение 82632)
Насколько много этого самого контента? Это гольный текст? Сколько тогда в нём символов?

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

Сначала вообще были мысли делить текст, исходя из пиксельных размеров контейнера и размера шрифта: сперва поделить всё на строки подходящей длины, потом брать нужное количество строк и вставлять. Но мне кажется это как-то слишком... короче, надеялся, что есть способ получше.
хотя, возможно, извращенные задачи требуют извращенных методов)

Aetae, спасибо
вероятнее всего так и придется сделать, или еще какой-нибудь скроллинг придумать.

monolithed 07.12.2010 20:43

Цитата:

Сообщение от R.I.P.er
сперва поделить всё на строки подходящей длины, потом брать нужное количество строк и вставлять.

Корректного определения во всех браузерах (что там браузеры - версии) не ждите. Также это зависит не только от браузеров, но и от ОС, разрешения экрана пользователя и пр. В общем это не то, мне кажется вы запутались.

R.I.P.er 07.12.2010 21:09

Цитата:

Сообщение от monolithed (Сообщение 82732)
Корректного определения во всех браузерах (что там браузеры - версии) не ждите. Также это зависит не только от браузеров, но и от ОС, разрешения экрана пользователя и пр.

да уж, чего-то подобного я и ожидал. спасибо за своевременное предостережение.

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

monolithed 07.12.2010 21:17

Я тогда не понимаю чем вас не устраивает вариант Aetae?

R.I.P.er 07.12.2010 21:28

от чего же не устраивает, вполне устраивает:
Цитата:

Сообщение от R.I.P.er (Сообщение 82729)
Aetae, спасибо
вероятнее всего так и придется сделать, или еще какой-нибудь скроллинг придумать.

проблема решена.
всем большое спасибо за помощь и советы.

полагаю, вопрос можно считать исчерпанным)

Aetae 07.12.2010 21:56

Ну чтоб уж до конца: разбивка на куски, если таки нужна именно она, а не то что я предложил в начале, будет выглядеть упрощённо как-то так:
<style type="text/css">
div {width:33%;height:140px;border:1px solid #000;float:left;overflow:hidden}
div#content{width:99%;height:auto;border:0;}
</style>
<div id="e1"></div>
<div id="e2"></div>
<div id="e3"></div>
<div id="content">
В 1797, в десятилетнем возрасте стал студентом Франсуа Девьенна и Иоганна Георга Вундерлиха в Парижской консерватории. В те времена каждый флейтист, желавший получить диплом об окончании консерватории, должен был выиграть первый приз на ежегодном конкурсе флейтистов, и Гийю добился его в 1805 г. С 1816 г. Гийю — придворный музыкант короля Людовика XVIII, а в 1822—1826 годах солист оркестра Гранд-Опера. С 1819 по 1829 гг. Гийю профессор Парижской консерватории. Среди его учеников Луи Дорюс.

Гийю был весьма обеспеченным человеком, однако какие-то значительные финансовые проблемы возникли в его жизни, и к концу 1820-х Гийю потерял все состояние. С 1829 он вынужденно начал активно гастролировать по Европе и, в конечном счете, с 1831 года навсегда обосновался в Санкт-Петербурге.
</div>
<script type="text/javascript">
c=document.getElementById('content').innerHTML.split(' '); //разбиваем текст на слова
i=0;
function cut(e) {
var e=document.getElementById(e),h=e.offsetHeight;i--;
while(e.scrollHeight<=h)e.appendChild(document.createTextNode(' '+c[++i])); //пока высота текста меньше высоты блока - добавляем по слову
e.removeChild(e.lastChild); //убираем последнее добавленное слово, которое вышло за заданные границы
}
cut('e1');
cut('e2');
cut('e3');
</script>


Но всё равно лучше так не делать)

R.I.P.er 07.12.2010 22:29

здорово, как раз то, что интересовало.
Aetae, спасибо еще раз!

Цитата:

Сообщение от Aetae (Сообщение 82739)
Но всё равно лучше так не делать)

но для общего развития полезно)
да и на будущее пригодиться может))


Часовой пояс GMT +3, время: 14:16.