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

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

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


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

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

Добавлено через 1 минуту
Цитата Сообщение от stele Посмотреть сообщение
(тем более он поминал какое-то сложное форматирование).
ТС как всегда не озвучил полное ТЗ. И постоянно появляются новые вводные.
0
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3961 / 2125 / 833
Регистрация: 13.03.2010
Сообщений: 6,976
22.02.2026, 12:21
Цитата Сообщение от voraa Посмотреть сообщение
И постоянно появляются новые вводные.
Будто что-то новое для этого ТСа.
0
232 / 94 / 22
Регистрация: 29.02.2016
Сообщений: 497
22.02.2026, 13:56
Цитата Сообщение от voraa Посмотреть сообщение
Только для моноширинных фонтов. Для других у "." и "Ш" ширина будет сильно отличаться. Тем более, что браузер сам часто форматирует текст, раздвигая пробелы, делая разные расстояния между словами.
Ну так получается задача не имеет решения. Ибо теоритически нельзя высчитать как потом наобум бравзер отрисует (ещё ведь специально добавит буквам тремор что бы либо получить индивидуальный отпечаток экземпляра или скрыть его). Но использовать для первоначального размера, если уж так нужна производительность, можно, что бы с нуля побуквенно не добавлять. Ну или на скрытом канвасе рисовать и мерить. Кстати, а может быть тс на точной копии такого блока не включённом в дом попробует всё это провернуть.
0
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,939
22.02.2026, 14:07
Цитата Сообщение от stele Посмотреть сообщение
Ну так получается задача не имеет решения.
Имеет.
Самое простое (но не эффективное) выводить последовательно увеличивая на символ строку, пока помещается. (Начальную часть он будет каждый раз одинаково форматировать) Если поместится 120 символов, то будет 120 проверок.
Но можно бинарным поиском нужной длины. Если, скажем, исходный текст 1024 символа, то деля каждый раз поплам, мы уложимся в 10 проверок.
0
232 / 94 / 22
Регистрация: 29.02.2016
Сообщений: 497
22.02.2026, 14:43
Цитата Сообщение от voraa Посмотреть сообщение
мы уложимся в 10 проверок.
А потом пользователь нажмёт Ctrl++ или Ctrl+- и расчёт окажется неверным
0
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,939
22.02.2026, 17:06
Цитата Сообщение от stele Посмотреть сообщение
А потом пользователь нажмёт Ctrl++ или Ctrl+- и расчёт окажется неверным
Ничего подобного. Масштабируется все одинаково. И размер фонта, и ширины с высотами элементов.
Вы просто попробуйте.
0
232 / 94 / 22
Регистрация: 29.02.2016
Сообщений: 497
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
232 / 94 / 22
Регистрация: 29.02.2016
Сообщений: 497
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,939
26.02.2026, 06:58
Цитата Сообщение от Fixmon Посмотреть сообщение
Получается что никто не может, тоже разобраться как это делает ютуб?
Цитата Сообщение от Fixmon Посмотреть сообщение
Вот пример, на ютубе это каким то образом реализовано...
"Еще" всегда в конце третей строчки, прижата к тексту.
А у меня оно на третьей но не прижата
0
232 / 94 / 22
Регистрация: 29.02.2016
Сообщений: 497
26.02.2026, 11:15
Цитата Сообщение от Fixmon Посмотреть сообщение
Получается что никто не может, тоже разобраться как это делает ютуб?
Ещё раз: создаёт канвас с точной копией стиля блока и на нём начинает отмерять текст через measureText.
0
 Аватар для voraa
1296 / 1282 / 190
Регистрация: 21.01.2024
Сообщений: 5,939
26.02.2026, 11:36
Цитата Сообщение от stele Посмотреть сообщение
Ещё раз: создаёт канвас с точной копией стиля блока и на нём начинает отмерять текст через measureText.
А какой смысл в этом? Мы должны так же по символу добавлять текст и проводить замер, пока удовлетворяет каким то условиям?
Про точную копию это странно. Там будут работать всякие white-space: pre-wrap; ?

ТС, я предложил вам код. Вы его пробовали? Что в нем не так? Приведите пример, когда он не работает.
0
232 / 94 / 22
Регистрация: 29.02.2016
Сообщений: 497
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
Ответ Создать тему
Опции темы

Новые блоги и статьи
Эксперимент с картинкой-обложкой на CodinGame
Adler 10.07.2026
Решил на днях провести эксперимент. У меня есть аккаунт на CodinGame, ТОП-3 по РФ среди 2200 участников (в разделе соревнования по программированию ИИ-ботов). Там есть обложка, куда можно влепить. . .
После бана на Пикабу не работает авторизация аккаунта с Яндекса.
Hrethgir 09.07.2026
В частности https:/ / auto. ru/ logbook/ zapret-na-vozhdenie-posle-65-let_1cf28789-07b4-4c75-a2f7-4cd4edf9deeb тут хотел оставить комментарий такой Зрите в корень - монополизация на разработку программ. . .
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), и решил посмотреть, что это такое. Из этого всего я работал более менее. . .
Море в объективе
kumehtar 06.07.2026
Хотел написать много проникновенных слов, но передумал. Оно само - говорит. Кто слышит тот слышит.
Doom для терминала без стрельбы и монстров. 3D Raycasting на ascii.
dcc0 05.07.2026
Попросил нейронную сеть deepai. org написать рейкастинг 3D с библиотекой ncurses для Linux. Чтобы можно было ходить на стрелочки. Чтобы стены были отрисованы символами. Справилась. Первый вариант. . .
Установка статуса документа по условию
Maks 05.07.2026
Алгоритм из решения ниже реализован на нетиповом документе "НарядПутевка" разработанного в КА2. Задача: в табличной части "Материалы" документа при записи автоматически устанавливать статус. . .
Сезонность и суточность закисления почв
anaschu 04.07.2026
200 часов это все равно моловато. Есть ситуации, но нестандартные, когда смена происходит за 5 лет. Но обычно это 50 лет и более. Наверное, закисление почвы происходит сезонно в средней. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru