Сьставить текст из слов
Привет. Я разбил текст на слова
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,
разбить текст на слова и пробелы,сделать блок, добавлять в него последовательно части текста, смотреть длину блока. если ещё другой метод для этого, то он мне не известен))). |
Так я это и делаю. Но не понимаю как массив или объект строк получить
|
ureech,
не понимаю. |
В первом сообщении смотри. Я собираю только первую строку. Как собрать весь текст по строкам
|
Пока сделал так
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> |
разбивка текста по ширине блока
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, время: 04:40. |