-28 / 0 / 0
Регистрация: 26.03.2025
Сообщений: 202

Тяжело тз, добавить 'Слово' в конец третей строчки

14.02.2026, 04:07. Показов 1597. Ответов 42
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Тз.

Есть текст, с переносами строк, количество стром может быть любое.
  1. Необходимо выполнить на js, на css нет решения
  2. В блоке должно быть текста на 3 строчки, не больше
  3. В конец третей строчки необходимо добавить "Продолжение"
  4. "Продолжение" не должно оказаться на 4 строчке в соответствии со вторым пунктом
  5. Не допустимо делать какие либо манипуляции с документом, за исключением последовательного добавления значений массива

HTML5
1
<div id='text' style='width: 200px; white-space: pre-wrap; hyphens: auto;'></div>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
let t = 'Текст текст текст текст текст текст текст текст текст текст текст текст текст \n текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст \n  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст  текст'
 
let line = [0, 0, 0];
// 1 - нумерация строк
// 2 - наибольшее количество символов что помещается в строчку, ориентируюсь на первые 2
// 3 - подсчитываем количество символов текущей строчки, при новой строки фиксируем и переносим во второе если значение больше
for (let v of t.match(/<\/?[^>]+>|[^<\s]+|[ \n]/g)) {
    //Тут считаем количество символов
    line[2] = line[2] + v.length;
                    
    // 3 строчка, ок
    if(line[0] == 3) {
        // До вставки значение, если значение это перенос, останавливаем цикл, либо текущее значение превышает значение наибольшей длины строки
        if(v == '/n' || line[1] <= line[2]) {
            return;
        }
 
    }
    //Добавляем значение в блок, если 3-строка и перенос,нет, получится "Продолжение" на четвертой строке
    text.innerHTML += v;
    
    //При изменении высоты блока - сигнал о старте новой строчки.
    if(line[3] != text.offsetHeight) {
        //Фиксируем настоящую высоту                        
        line[3] = text.offsetHeight;
        //Подсчитываем количество строк != 0 иначе не верный подсчет символов в строке будет. 
        if(line[0]++ != 0 && line[1] <= line[2]) 
            line[1] = line[2]-v.length;
                                    
            console.log(line, 'do')
            line[2] = v.length;
            console.log(line, 'fix')
                                        
        }
                
    }
//Добавляем
text.innerHTML += ` <b>Продолжение</b>`;
Кажется задача одна из легких, как бы не так, пол дня просидел, так до ума не получилось довести. Все какие та "Артифакты" в логике...

Опустим тот факт, что "Продолжение" имеет свою длину и при добавлении в самый конец строчки, будет перенос...
Пока без этого, у меня уже голова кругом...
0
Лучшие ответы (1)
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
14.02.2026, 04:07
Ответы с готовыми решениями:

Нужна такая штука: когда на второе текстовое поле попадает фокус - появляется третье поле; когда на третье поле попадает фокус - появляетя четвертое .
Здравствуйте! Помогите нарисовать такой скрипт: Открывается документ, в котором есть 2...

Тяжелые изображения
Добрый день! Ситуация: на странице должно быть много изображений (общий вес их около 1ГБ+),...

Почему фрейм который выполняет тяжёлый скрипт подвешивает родительскую страницу?
В родительскую страницу вставлен фрейм: ... &lt;iframe width=&quot;500&quot; height=&quot;500&quot;...

42
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,941
26.02.2026, 13:03
Студворк — интернет-сервис помощи студентам
Цитата Сообщение от stele Посмотреть сообщение
Поправляюсь: копия стиля шрифта блока, а не самого блока.
Но там получится слишком сложный алгоритм разбиения на строки, если делать его универсальным и с учетом возможных стилей у исходного блока.
0
233 / 95 / 22
Регистрация: 29.02.2016
Сообщений: 498
26.02.2026, 13:33
Цитата Сообщение от voraa Посмотреть сообщение
Но там получится слишком сложный алгоритм разбиения на строки, если делать его универсальным и с учетом возможных стилей у исходного блока.
Да, там лютое нагромождение циклов, проверок условий, рекурсий. Ну и он же не уверсальный, он вот для конкретного блока с конкретным назначенным ему стилем шрифта. Потом этот стиль, но вычесленный браузером, переносятся на канвас. И отмеряют строку с определёнными ими условиями переноса по пробелам, пунктациями и чему-то ещё, что они сочли достойным переноса. И так три раза. Если конечно я не ошибся в поиске нужного места в коде и гуглоиишница не ввела меня в заблуждение.
0
-28 / 0 / 0
Регистрация: 26.03.2025
Сообщений: 202
01.03.2026, 15:09  [ТС]
Цитата Сообщение от stele Посмотреть сообщение
Вот не больше трёх строк, без переводов строк, с учётом если меньше.
Потестил, кажется оно. Отпишусь если что та не получиться...

Голову ломал как это сделать без
Code
1
-webkit-line-clamp: 3;
Оказалось просто необходимо было перебирать со свойством, а наличие последнего символа в виде переноса, просто удалить.
Спс
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
01.03.2026, 15:09

В целом понимаю как работает код, но в коде ориентироваться тяжело, если кто-то напишет комментарии буду благодарен)
Помогите пожалуйста разобраться с кодом, в целом понимаю как работает код, но в коде...

Как добавить введенный текст в конец адресной строки?
Писал в другом разделе - HTML, но похоже им промахнулся, может теперь кто сможет мне помочь.. ...

Добавить значение в конец url
Hi all, каким образом можно присвоить значение пойманое с promt в конец url &lt;a...

Добавить в конец url значение
У меня есть ссылка при нажатии на кнопку допутим с классом .btn нужно в адресной строке дополнить...

Значения из инпутов, добавить в конец массива.
Доброго времени суток. Помогите пожалуйста закончить задачу. Нужно значения из инпутов, добавить в...


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

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

Новые блоги и статьи
сукцессия 22. От артефактов к физиологии: калибровка агентной модели грибной сукцессии для воспроизведения сезонной динамики и pH-плато
anaschu 11.07.2026
Аннотация В данной работе представлена калибровка агентной модели динамики грибных сообществ (fungal-succession), направленная на устранение нефизичных артефактов (коллапс биомассы, мгновенное. . .
Сукцессия 20. Война автоботов. Делаем ставки. Лёд против "пш-пш!".
anaschu 11.07.2026
Битва ИИ в ризосфере: Как мы скрестили жесткие ОДУ, закон Фика и «подземный шантаж» Уважаемые коллеги! Хочу поделиться уникальным опытом ведения междисциплинарной компьютерной разработки. Прямо. . .
Сукцессия 19. Какие выводы я сделал из модели? Часть 2.Внутримикоризный стехиометрический буфер и хроно-дискретные зоны экспансии
anaschu 11.07.2026
Био-Инженерный Ликбез: Архитектура Модели Ризосферы Математический аппарат моделирования
Сукцессия 18. Какие выводы я сделал из войны грибов с деревьями? Часть 1- рассказ и немного про термины
anaschu 11.07.2026
Био-Инженерный Ликбез: Архитектура Модели Ризосферы Математический аппарат моделирования Система ОДУ описывает динамику изменения массы различных компонентов системы во времени. Ключевой. . .
Просветление в 5 секунд
kumehtar 10.07.2026
Андрей Веретенников выдал фразу недавно: "Вам не обязательно кем-то себя считать"
Эксперимент с картинкой-обложкой на CodinGame
Adler 10.07.2026
Решил на днях провести эксперимент. У меня есть аккаунт на CodinGame, ТОП-3 по РФ среди 2200 участников (в разделе соревнования по программированию ИИ-ботов). Там есть обложка, куда можно влепить. . .
GitDOS: Когда я решил скрестить MS-DOS, GitHub и Claude
MaGz GoLd 08.07.2026
Привет, Киберфорум! Хочу поделиться своим проектом, который, надеюсь, вас заинтересует. GitDOS — это веб-приложение, которое позволяет запускать DOS в браузере с тремя крутыми фичами: диски живут в. . .
Учебный мини "цифровой двойник" = (Сервер = Java + Flask_питон )+(3D = Гугловскаая 4T nvideo + google colab) +( WMS = Odoo на Docker)
anaschu 07.07.2026
Увидел в требованиях к вакансии создателя имитационных моделей связку (REst + Api + WMS + Anylogic + питон + 3D Nvideo), и решил посмотреть, что это такое. Из этого всего я работал более менее. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru