Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.01.2023, 09:06
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 653

Сьставить текст из слов
Привет. Я разбил текст на слова
var text = str.split(' ')

Посчитал их количество
var count = text.length


Теперь хочу собрать предложения определённой длины( в пикселях). Все данные есть. Нужна помощь собрать текст
var pageWidth = 900;
    var line = []
    var long = 0
for (let i = 0; i < count; i++){

long += +textWidth[i] + emptySpace // длина слова + длина пробела
        if(long<=pageWidth){
            line += text[i]+' '; // тут только первая строка
        }

}

Последний раз редактировалось ureech, 25.01.2023 в 09:48.
Ответить с цитированием
  #2 (permalink)  
Старый 25.01.2023, 09:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,652

ureech,
разбить текст на слова и пробелы,сделать блок, добавлять в него последовательно части текста, смотреть длину блока. если ещё другой метод для этого, то он мне не известен))).
Ответить с цитированием
  #3 (permalink)  
Старый 25.01.2023, 09:41
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 653

Так я это и делаю. Но не понимаю как массив или объект строк получить

Последний раз редактировалось ureech, 25.01.2023 в 09:54.
Ответить с цитированием
  #4 (permalink)  
Старый 25.01.2023, 09:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,652

ureech,
не понимаю.
Ответить с цитированием
  #5 (permalink)  
Старый 25.01.2023, 09:48
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 653

В первом сообщении смотри. Я собираю только первую строку. Как собрать весь текст по строкам
Ответить с цитированием
  #6 (permalink)  
Старый 25.01.2023, 10:24
Профессор
Отправить личное сообщение для ureech Посмотреть профиль Найти все сообщения от ureech
 
Регистрация: 11.03.2013
Сообщений: 653

Пока сделал так
for (let i = 0; i < count; i++){
        textWidth[i] = getWidthOfText(text[i],'Lato','18px')
        long += +textWidth[i] + emptySpace
        if(long<=pageWidth){
            line += text[i]+' ';
        }else {
            long = +textWidth[i] + emptySpace
            line += '</br>';
          }
       }

Но желательно конечно обернуть строки в <p>...</p>
Ответить с цитированием
  #7 (permalink)  
Старый 25.01.2023, 11:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,652

разбивка текста по ширине блока
ureech,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .text p.test {
            white-space: nowrap;
            display: inline-block;
        }

        .text p {
            border: 1px solid red;
            margin: 3px auto;
        }

        .text {
            width: 500px;
            border: 1px solid #008000;
            padding: 2px 4px;
        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function() {

            let div = document.querySelector(".example");
            let txt = div.textContent.match(/\s+|\S+/g);
            let p = document.createElement("P");
            let out = document.querySelector(".text");
            out.append(p);
            let pageWidth = p.clientWidth;
            p.classList.add("test");
            for (let sample of txt) {
                let node = document.createTextNode(sample);
                p.append(node);
                if (p.scrollWidth > pageWidth) {
                    node.remove();
                    let clone = p.cloneNode(true);
                    clone.classList.remove("test");
                    out.append(clone);
                    p.textContent = sample;
                }
            }
            p.classList.remove("test");
            out.append(p);
        })
    </script>
</head>

<body>
    <div class="example">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, voluptate, facilis, suscipit, nihil laborum cumque obcaecati debitis eos adipisci ea cupiditate quasi tenetur quo. Dicta, animi quos perferendis ut iure. Debitis, beatae, voluptatibus,
        illum odio in fuga doloremque ea magnam natus labore molestiae quas dolore reprehenderit architecto cupiditate nostrum ut omnis inventore quibusdam placeat asperiores expedita necessitatibus ad hic vel? Rem, neque qui incidunt consectetur sint
        maiores architecto recusandae eos cupiditate consequuntur iure explicabo? Consequatur, culpa quibusdam autem nam officia aspernatur quisquam ab tenetur ducimus voluptatem. Consectetur, architecto earum veritatis.</div>
    <div class="text"></div>
</body>

</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите поправить код, определения высоты блоков и их сравнения ozoro jQuery 20 09.11.2019 17:55
Помогите исправить JQuery плагин для разделения UL на равные списки ozoro jQuery 12 25.10.2019 18:37
Раскрывающийся список с объемными текстами morzer Общие вопросы Javascript 4 11.07.2016 15:54
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 03:30