У меня есть массив с несколькими абзацами, которые должны быть помещены в контейнер, пока этот контейнер не будет «заполнен». Все, что не помещается в этот контейнер, должно быть помещено в отдельный контейнер.
Мое решение в основном работает нормально, с небольшой «косметической» ошибкой, которую я хотел бы исправить. Мой подход состоит в том, чтобы объявить максимальную высоту контейнера, в который будет помещен текст (0px
в начале, так как он пуст). Эта максимальная высота равна высоте элемента, обертывающего контейнер, высота которого задается с помощью CSS.
Затем я помещаю содержимое в text node
внутри первого контейнера, обновляя файл nodeValue
. Перед каждой итерацией проверяется высота контейнера, и пока он не выше родителя, который его обертывает, содержимое размещается. Как только первый контейнер «полный» (= его высота равна высоте его родителя), оставшееся содержимое помещается в отдельный контейнер.
Я не могу просто поместить каждый абзац целиком, потому что если последний абзац, помещенный в первый контейнер, достаточно длинный, чтобы заполнить несколько строк (конечно, в зависимости от ширины контейнера/родителя), эти строки все равно окажутся в первом контейнере и быть отрезанным. Поэтому я перебираю каждое слово каждого абзаца, проверяя высоту каждый раз, когда обновляется nodeValue
.
Все это работает, как и ожидалось, см. прикрепленный фрагмент.
Единственная оставшаяся проблема заключается в том, что последняя строка текста внутри первого контейнера имеет длину всего одно слово. Я знаю, что это происходит, конечно, потому что, как только nodeValue
обновляется этим словом, высота контейнера распознается как слишком высокая, чтобы вместить больше содержимого, и скрипт переходит к следующему контейнеру.
Есть ли способ «поймать» это последнее слово и убедиться, что оно также помещено во второй контейнер? Или, альтернативно, правильно заполнить последнюю строку первого контейнера, но я предполагаю, что это сложнее. Ценю любые советы.
// Utilities
function update_NodeContent(newContent, container) {
var nodeContent_old = container.childNodes[0].nodeValue;
var nodeContent_add = newContent + " ";
var nodeContent_new = nodeContent_old + nodeContent_add;
container.childNodes[0].nodeValue = nodeContent_new;
}
// Variables
var cellHeight = $("#cell1").height();
// Content
var content = [
"The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex!",
"Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack. Quick wafting zephyrs vex bold Jim. Quick zephyrs blow, vexing daft Jim. Sex-charged fop blew my junk TV quiz.",
"How quickly daft jumping zebras vex. Two driven jocks help fax my big quiz. Quick, Baz, get my woven flax jodhpurs! »Now fax quiz Jack!« my brave ghost pled. Five quacking zephyrs jolt my wax bed.",
"Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox."
]
function placeText() {
while (content.length) {
var node = document.createTextNode("");
$("#cell1 .container").append(node);
//
var content_words = content[0].split(" ");
for (var i = 0; i < content_words.length; i++) {
//
var textBlockHeight = $("#cell1 .container").height();
if (textBlockHeight < cellHeight) {
update_NodeContent(content_words[i], $('#cell1 .container')[0]);
} else {
update_NodeContent(content_words[i], $('#cell2 .container')[0]);
}
}
//
var itemtoRemove = content[0];
content.shift();
}
}
// Execution
placeText();
:root {
--height_line_single: 19px;
--height_textBlock: calc(var(--height_line_single) * 14);
}
body {
font-size: 16px;
line-height: 1.2;
}
p {
margin: 0 0 1rem 0;
}
p.noMargin {
margin: 0;
}
.article {
width: 90vw;
}
.text-block {
height: var(--height_textBlock);
overflow: hidden;
background: lightgreen;
margin-bottom: 1rem;
}
#cell1 {
width: calc(100%/3);
}
#cell2 {
column-count: 3;
column-fill: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="article">
<div id="cell1" class="text-block">
<div class="container">
</div>
</div>
<div id="cell2" class="text-block">
<div class="container">
</div>
</div>
</div>