Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Eur93
47 / 47 / 24
Регистрация: 16.09.2013
Сообщений: 346
1

Продолжение текста в другом div'e

10.02.2014, 15:07. Просмотров 389. Ответов 9
Метки нет (Все метки)

Есть 2 окошка (div). Например, первый div имеет высоту 100 px, и когда текст внутри этого div достигнет его границы, то не в скроллбар, а нужно, чтобы текст продолжился в соседнем окне.
Вот песочница: http://jsfiddle.net/8tg5s/
Если здесь в div brat текст переполняется, то этот текст должен продолжиться в brat2. Как это можно сделать?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="mama">
    <div class="brat">
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
    </div>
    <div class="brat2"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.mama {
    width: 300px;
    height: 200px;
    outline: 1px solid #000;
}
 
.brat {
    width: 120px;
    height: 150px;
    margin: 25px 0 0 20px;
    float:left;
    outline: 1px solid #000;
}
 
.brat2 {
    width: 120px;
    height: 150px;
    margin: 25px 20px 0 0;
    float:right;
    outline: 1px solid #000;
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.02.2014, 15:07
Ответы с готовыми решениями:

Как сделать отображение в реальном времени: текста из поля, в другом поле?
Нужно сделать простую штуку: 1. Обычное поле для ввода текста. 2. Поле для...

Продолжение цикл for
Спасибо всем за участие, Несмотря на то, что я новичок в Javascript и...

Toggle продолжение
Здраствуйте, подскажите вот у меня есть такой код, но я хочу чтобы галерея...

Крестики Нолики продолжение
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt; &lt;/script&gt; &lt;script...

Продолжение блока с другой стороны
Привет. Как продолжить div с другой стороны, если он вышел за пределы...

9
vovandr
630 / 518 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
10.02.2014, 16:11 2
можно организовать вот такое:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="mama">
    <div class="brat col">
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
        brat brat brat brat
    </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.mama {
 
    height: 200px;
    outline: 1px solid #000;
}
 
.brat {
    height: 150px;
    margin: 25px 0 0 20px;
 
}
.col{
     -moz-column-width: 120px;
     -webkit-column-width: 120px;
      column-width: 120px;
}
0
Lazy_Den
2953 / 2624 / 1325
Регистрация: 15.01.2014
Сообщений: 5,766
10.02.2014, 16:43 3
vovandr, правильно подсказывает. Для всякой задачи - есть разумное решение. Но раз вы хотели на JS, то получите и распишитесь:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var bro = $('.brat'),
    hb = bro.height(); // высота первого блока
bro.wrapInner('<div class="test"></div>');
var ht = $('.test').height(); // реальная высота с учетом контента
// если реальная высота больше или равна заданной
if(ht >= hb){
    var linH = parseInt(bro.css('line-height'),10), // высота строки
        allStr = ht / linH, // общее кол-во строк
        hbStr = Math.ceil(hb / linH), // кол-во строк в первом блоке
        arrStr = bro.text().replace('\r','').split('\n'); // разбиваем на строки
    bro.text(arrStr.slice(0,hbStr).join('')); // часть сюды
    $('.brat2').text(arrStr.slice(hbStr, arrStr.length).join('')); // часть туды 
    // финал, все ликуют и не понимают - на кой такие телодвижения вообще?
}
Смотреть можно тут
0
Eur93
47 / 47 / 24
Регистрация: 16.09.2013
Сообщений: 346
10.02.2014, 17:55  [ТС] 4
vovandr, В вашем случае, получается, нельзя задать определенную высоту, после которой будет наполняться соседний столбец?

Lazy_Den, А в вашем случае не пойму, но вроде скрипт не работает. Песочницу, которую Вы мне скинули - не рабочая. Все слова находятся во втором столбце.
0
Lazy_Den
2953 / 2624 / 1325
Регистрация: 15.01.2014
Сообщений: 5,766
10.02.2014, 19:05 5
Цитата Сообщение от Eur93 Посмотреть сообщение
вроде скрипт не работает
Я делал в FireFox и там всё работало, но сейчас проверил в Хроме и оказалось, что там не катит. Сейчас нет времени разбираться в причинах, попробую позже.
0
vovandr
630 / 518 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
10.02.2014, 20:28 6
В вашем случае, получается, нельзя задать определенную высоту, после которой будет наполняться соседний столбец?
Если не секрет, для чего такое нужно? перенос текста в соседний блок с контролем высоты этого соседнего блока??? бред полный!
0
Eur93
47 / 47 / 24
Регистрация: 16.09.2013
Сообщений: 346
10.02.2014, 21:48  [ТС] 7
vovandr, с контролем высоты не только соседнего но и первого блока.
Это нужно, например, если эти два блока размещены на весь экран, куда поступает информация, когд первый блок (пол экрана) переполнится, информация перейдет во второй блок.
ЧТобы издалека можно было все увидеть и не подходить к монитору
0
vovandr
630 / 518 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
10.02.2014, 22:10 8
Так поставьте родителю высоту и всё, зачем вам контроль каждого блока? Я конечно не знаю всех тонкостей вашей задумки.
0
Lazy_Den
2953 / 2624 / 1325
Регистрация: 15.01.2014
Сообщений: 5,766
10.02.2014, 22:56 9
Eur93, Я думал, что тема уже закрыта В общем, проблема была в том, что если явно не указывать интерлиньяж, то Chrome, Opera трактует line-height, как "normal", в отличии от некоторых других браузеров, которые выдают пиксели. Если учесть, что обычно в css это прописывается, то работать будет без проблем. В противном случае, можно делать проверку:
Javascript
1
2
3
// ...
var linH = bro.css('line-height') == 'normal' ? 20 : parseInt(bro.css('line-height'),10), // высота строки
// ...
Пример тут. Но на вашем месте, я бы искал более разумное решение.

Добавлено через 10 минут
P.S. Я вообще сложно понимаю проблему. Представьте, что вы выбираете отличное решение, предложенное vovandr. Вы пытаетесь сделать как лучше, а может ведь получиться как всегда. Так может не нужно пытаться "впихнуть невпихуемое"?
0
Eur93
47 / 47 / 24
Регистрация: 16.09.2013
Сообщений: 346
11.02.2014, 07:38  [ТС] 10
vovandr, Да, это понятно и именно это я проделал в первую очередь.
Но вот что выходит в IE: (в остальных браузерах пока не проверял, но мне жизненно важно в IE)
http://upload.akusherstvo.ru/image603679.png

Вот песочница: http://jsfiddle.net/8tg5s/4/

Добавлено через 32 секунды
Т.е. место лишнее остается, что не есть хорошо
0
11.02.2014, 07:38
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.02.2014, 07:38

Дальнейшая обработка результатов живого поиск ajax (продолжение темы)
Тема сначала началась в разделе форума PHP, но теперь, оказалось, нужна помощь...

Как сделать вывод текста, результата и продолжение текста
#include &lt;iostream&gt; using namespace std; int main() { int win; ...

Из заданного текста выбрать и напечатать те символы (продолжение в теме)
Здравствуйте! Вот по этим заданиям требуется помощь! 1. Из заданного текста...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru