Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Сьставить текст из слов (https://javascript.ru/forum/dom-window/84881-sstavit-tekst-iz-slov.html)

ureech 25.01.2023 09:06

Сьставить текст из слов
 
Привет. Я разбил текст на слова
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]+' '; // тут только первая строка
        }

}

рони 25.01.2023 09:33

ureech,
разбить текст на слова и пробелы,сделать блок, добавлять в него последовательно части текста, смотреть длину блока. если ещё другой метод для этого, то он мне не известен))).

ureech 25.01.2023 09:41

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

рони 25.01.2023 09:42

ureech,
не понимаю.

ureech 25.01.2023 09:48

В первом сообщении смотри. Я собираю только первую строку. Как собрать весь текст по строкам

ureech 25.01.2023 10:24

Пока сделал так
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>

рони 25.01.2023 11:48

разбивка текста по ширине блока
 
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>


Часовой пояс GMT +3, время: 17:35.