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

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

14.02.2026, 04:07. Показов 1563. Ответов 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
26.02.2026, 13:03
Студворк — интернет-сервис помощи студентам
Цитата Сообщение от stele Посмотреть сообщение
Поправляюсь: копия стиля шрифта блока, а не самого блока.
Но там получится слишком сложный алгоритм разбиения на строки, если делать его универсальным и с учетом возможных стилей у исходного блока.
0
229 / 90 / 22
Регистрация: 29.02.2016
Сообщений: 478
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
Ответ Создать тему
Новые блоги и статьи
сукцессия 14. Обновленная схема модели
anaschu 28.06.2026
ГЛОБАЛЬНАЯ ОПИСАТЕЛЬНАЯ СПЕЦИФИКАЦИЯ ЭКОСИСТЕМНОЙ МОДЕЛИ «SOIL CHEMISTRY & MYCORRHIZA 2. 0» https:/ / ibb. co/ NnkGpfMd Представленная интегрированная схема описывает непрерывную нелинейную. . .
сукцессия 13. Питон модель трехзонного мицелия, пока что в основном арбускулярного
anaschu 28.06.2026
## Разработка агентной модели микоризной сукцессии: от выявления артефактов к созданию комплексной системы ### Аннотация Представлено исследование по разработке агентной модели микоризной. . .
сукцессия 12. краткий список проверок модели перед запуском.
anaschu 28.06.2026
Скрытые отказы в моделях систем динамики (SD-models) экологических систем: два случая из практики Контекст Разбирался прототип модели систем динамики (SD-модели) микоризной сукцессии: пять. . .
Сукцессия 11. Проверка орудий перед войной: разработка через тестирование
anaschu 28.06.2026
Как не дать модели соврать самой себе: проверки для симуляции микоризной сукцессии Введение Когда вы строите математическую модель живой системы — грибов, растений, почвы — главная опасность. . .
10 сукцессия. Питон код войны грибов и растений
anaschu 27.06.2026
import numpy as np class PlantAgent: def __init__(self, name, strategy, initial_biomass): self. name = name self. strategy = strategy # "greedy" (широколиственные) или. . .
сукцессия 9. Математика подлости: как растения предали грибных друзей
anaschu 27.06.2026
Статья 2. Глобальная фосфорная война: эволюционно-экономические механизмы распределения биомов Земли Введение: Экологический рынок как игра с нулевой суммой Традиционная экология долгое время. . .
сукцессия 8. Как я спорил с ИИ, которые - агенты растений и ненавистники грибов!
anaschu 27.06.2026
Статья 1. Хроники грибного восстания: как Сократов диалог разрушил академические догмы ИИ Введение: Синдром «цифрового учебника» Современные большие языковые модели (LLM) обладают колоссальным. . .
Главный вопрос моделирования сукцессии
anaschu 27.06.2026
главный вопрос. Если эктомикориза лучше добывает недоступный фосфор. И ее масса максимальна из всех. А широколиственный лес тоже имеет самую крутую биомассу. То почему не возникло их симбиоза? Это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru