Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  
 
 
-28 / 0 / 0
Регистрация: 26.03.2025
Сообщений: 202

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

14.02.2026, 04:07. Показов 1549. Ответов 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,935
22.02.2026, 11:25
stele, Когда добавляешь по символу, на вкладке Performanse получается жуткая расческа из Recalculate style - Layout


И даже на небольшом кол-ве символов (~120) у меня уже приближается к "красным" 17мс
0
225 / 84 / 22
Регистрация: 29.02.2016
Сообщений: 466
22.02.2026, 11:32
voraa, Скажем нет простям в роботе процессора, всю мощь в тепло!
0
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
22.02.2026, 11:39
Цитата Сообщение от stele Посмотреть сообщение
Скажем нет простям в роботе процессора, всю мощь в тепло!
Ну здесь в примере и стилей то особо нет - нечего пересчитывать. На реальной странице стилей больше. И часто браузер пересчитывает почти всю страницу, т.к. заранее не известно, что от чего зависит. И в таске 120 раз пересчитывать стили - явный перебор.
0
225 / 84 / 22
Регистрация: 29.02.2016
Сообщений: 466
22.02.2026, 11:51
Цитата Сообщение от voraa Посмотреть сообщение
И в таске 120 раз пересчитывать стили - явный перебор.
Ну не хочет топикстартер один раз текст добавить в блок и оставить как есть, нужно ему до буковки подогнать. Можно пытаться оптимизировать какими блоками текста (побуквенно, пословно или ещё как) добавлять содержимое (тем более он поминал какое-то сложное форматирование). И тут всегда будет не более 3 строк и произвольная надпись вместо штатного многоточия.

Добавлено через 5 минут
voraa, Хотя что проще: ширина блока известна, ширина символа известна. Поделить одно на другое умножить на количество строк. Взять кусок текста этого размера, засунуть его блок, узнать есть обрезка, если есть закрыть многоточие надписью. Но красота требует жертв.
0
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
22.02.2026, 12:13
Цитата Сообщение от stele Посмотреть сообщение
ширина символа известна.
Только для моноширинных фонтов. Для других у "." и "Ш" ширина будет сильно отличаться. Тем более, что браузер сам часто форматирует текст, раздвигая пробелы, делая разные расстояния между словами.

Добавлено через 1 минуту
Цитата Сообщение от stele Посмотреть сообщение
(тем более он поминал какое-то сложное форматирование).
ТС как всегда не озвучил полное ТЗ. И постоянно появляются новые вводные.
0
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3961 / 2123 / 833
Регистрация: 13.03.2010
Сообщений: 6,968
22.02.2026, 12:21
Цитата Сообщение от voraa Посмотреть сообщение
И постоянно появляются новые вводные.
Будто что-то новое для этого ТСа.
0
225 / 84 / 22
Регистрация: 29.02.2016
Сообщений: 466
22.02.2026, 13:56
Цитата Сообщение от voraa Посмотреть сообщение
Только для моноширинных фонтов. Для других у "." и "Ш" ширина будет сильно отличаться. Тем более, что браузер сам часто форматирует текст, раздвигая пробелы, делая разные расстояния между словами.
Ну так получается задача не имеет решения. Ибо теоритически нельзя высчитать как потом наобум бравзер отрисует (ещё ведь специально добавит буквам тремор что бы либо получить индивидуальный отпечаток экземпляра или скрыть его). Но использовать для первоначального размера, если уж так нужна производительность, можно, что бы с нуля побуквенно не добавлять. Ну или на скрытом канвасе рисовать и мерить. Кстати, а может быть тс на точной копии такого блока не включённом в дом попробует всё это провернуть.
0
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
22.02.2026, 14:07
Цитата Сообщение от stele Посмотреть сообщение
Ну так получается задача не имеет решения.
Имеет.
Самое простое (но не эффективное) выводить последовательно увеличивая на символ строку, пока помещается. (Начальную часть он будет каждый раз одинаково форматировать) Если поместится 120 символов, то будет 120 проверок.
Но можно бинарным поиском нужной длины. Если, скажем, исходный текст 1024 символа, то деля каждый раз поплам, мы уложимся в 10 проверок.
0
225 / 84 / 22
Регистрация: 29.02.2016
Сообщений: 466
22.02.2026, 14:43
Цитата Сообщение от voraa Посмотреть сообщение
мы уложимся в 10 проверок.
А потом пользователь нажмёт Ctrl++ или Ctrl+- и расчёт окажется неверным
0
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
22.02.2026, 17:06
Цитата Сообщение от stele Посмотреть сообщение
А потом пользователь нажмёт Ctrl++ или Ctrl+- и расчёт окажется неверным
Ничего подобного. Масштабируется все одинаково. И размер фонта, и ширины с высотами элементов.
Вы просто попробуйте.
0
225 / 84 / 22
Регистрация: 29.02.2016
Сообщений: 466
22.02.2026, 17:49
Цитата Сообщение от voraa Посмотреть сообщение
И размер фонта, и ширины с высотами элементов.
Это у тех кто не поставил или снял галочку только текст.
0
-28 / 0 / 0
Регистрация: 26.03.2025
Сообщений: 202
22.02.2026, 19:41  [ТС]
Вот пример, на ютубе это каким то образом реализовано...

"Еще" всегда в конце третей строчки, прижата к тексту.

Единственное отличие, у ютуба каждая строчка обернута в html блок что еще сложнее выполнить.

Думаю, что у ютуба изначально текст без html, а после того как добавили в блок необходимое количество текста, обернули во все необходимые html блоки.
0
22.02.2026, 19:54
 Комментарий модератора 
Fixmon, не прикрепляйте вложения с материалами, нарушающими законодательство РФ.
0
225 / 84 / 22
Регистрация: 29.02.2016
Сообщений: 466
22.02.2026, 20:44
Цитата Сообщение от Fixmon Посмотреть сообщение
это каким то образом реализовано...
Кажется они измеряют текст через Canvas measureText. Рисуют порциями и расчитывают сколько это будет в строках для текущего размера блока.
0
-28 / 0 / 0
Регистрация: 26.03.2025
Сообщений: 202
23.02.2026, 01:05  [ТС]
Цитата Сообщение от stele Посмотреть сообщение
Кажется они измеряют текст через Canvas measureText. Рисуют порциями и расчитывают сколько это будет в строках для текущего размера блока.
Можно пример, как это делается?
0
-28 / 0 / 0
Регистрация: 26.03.2025
Сообщений: 202
26.02.2026, 05:10  [ТС]
Получается что никто не может, тоже разобраться как это делает ютуб?
0
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
26.02.2026, 06:58
Цитата Сообщение от Fixmon Посмотреть сообщение
Получается что никто не может, тоже разобраться как это делает ютуб?
Цитата Сообщение от Fixmon Посмотреть сообщение
Вот пример, на ютубе это каким то образом реализовано...
"Еще" всегда в конце третей строчки, прижата к тексту.
А у меня оно на третьей но не прижата
0
225 / 84 / 22
Регистрация: 29.02.2016
Сообщений: 466
26.02.2026, 11:15
Цитата Сообщение от Fixmon Посмотреть сообщение
Получается что никто не может, тоже разобраться как это делает ютуб?
Ещё раз: создаёт канвас с точной копией стиля блока и на нём начинает отмерять текст через measureText.
0
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,935
26.02.2026, 11:36
Цитата Сообщение от stele Посмотреть сообщение
Ещё раз: создаёт канвас с точной копией стиля блока и на нём начинает отмерять текст через measureText.
А какой смысл в этом? Мы должны так же по символу добавлять текст и проводить замер, пока удовлетворяет каким то условиям?
Про точную копию это странно. Там будут работать всякие white-space: pre-wrap; ?

ТС, я предложил вам код. Вы его пробовали? Что в нем не так? Приведите пример, когда он не работает.
0
225 / 84 / 22
Регистрация: 29.02.2016
Сообщений: 466
26.02.2026, 12:08
Цитата Сообщение от voraa Посмотреть сообщение
какой смысл в этом? Мы должны так же по символу добавлять текст и проводить замер, пока удовлетворяет каким то условиям?
Я так ради спортивного интереса, ибо есть и свой интерес в несколько подобном выкрутасе, там в этом жутьком обфусцированном коде потыкался, гуглоиишницу попытал, и получается: они дозируют текст для измерения по некоему алгоритму возможности разбивки текста по строкам и по результату измерения формируют строки по длине блока, т.е сам бравзер в обрезке не играет. А надпись "...исчо" есть всегда, они третью строку отмеряют меньше.

Добавлено через 19 минут
Цитата Сообщение от voraa Посмотреть сообщение
Там будут работать всякие white-space: pre-wrap; ?
Поправляюсь: копия стиля шрифта блока, а не самого блока.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
26.02.2026, 12:08

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

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
40
Ответ Создать тему
Новые блоги и статьи
Контроль уникальности строк в табличной части документа
Maks 18.06.2026
Алгоритм из решения ниже разработан на примере нетипового документа "ПланированиеСпецтехники" с табличной частью "НаличиеОборудования", разработанного в КА2. Задача: контроль уникальности строк в. . .
Клиент
Uhbif79 18.06.2026
Здесь простой клиент для работы с сервером.
Сервер
Uhbif79 18.06.2026
Выкладываю простейший сервер.
Дефенестрация
kumehtar 18.06.2026
Узнал интересное слово. Дефенестрация. Это когда ты выбрасываешь кого-либо или что-либо из окна. Возьму на вооружение)))
Дихотомия добра и зла
kumehtar 18.06.2026
Как Дзен-буддисты говорят о добре и зле: не нужно воевать против зла, нужно воевать против невежества. Тогда добро станет ествественным, и поэтому вечным. Но дело в том, что невежество всё время. . .
Своя Интернет-Компания
iceja 18.06.2026
Я программист с экономическим образованием, пишу свой проект, это SaaS для бизнесов. Мне нужен co-founder с высшим экономическим образованием, и/ или инвестор. Сейчас проект в интенсивной разработке,. . .
24 Мат модель здравосохранения: функциональные требования к строительству пищеблока
anaschu 18.06.2026
СРесурсами1: финансовый SD-контур, калькулятор функциональных требований пищеблока Сегодня разделили затраты в агенте Экономика по образцу модели НАСОСЫ, добавили расчёт ROI и построили первый. . .
23. что сделано за последнее время.
anaschu 17.06.2026
• Эталон: Клиника НИИ питания РАМН, Москва — централизованный пищеблок, 225 коек, 180 пациентов • Git: репозиторий med2, ветка абсентеизм. Рабочий файл: СРесурсами1_v4. alp • Смежный проект:. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru