Макет страницы CSS w/Повреждения
Я пытаюсь сделать веб-страницу, где она в основном похожа на документ слова. Было бы несколько полей, которые прокрутят вниз, и текст тек бы и разрыв страницы от одной страницы до следующего.
У кого-либо есть какая-либо идея, где я даже запустил бы?Спасибо.
Править: Это должно быть правильно в браузере, выглядя подобным этому:
(Проигнорируйте столбцы),
3 ответа
Что-то подобное кажется возможным при использовании javascript, но это немного зависит от структуры вашего html и от того, хотите ли вы разбить абзацы или просто переместить следующий абзац на следующую страницу, если он не подходит
Итак, простейший пример, не разбивая элементы параграфов / html с плоской структурой html (без вложенных div, столбцов и т. Д.), Например:
<div class="document">
<h1>title</h1>
<p>texts</p>
<h2>subtitle</h2>
<p>texts</p>
...
<p>texts</p>
</div>
, - это сделать что-то вроде:
height = 0
loop through all direct child elements of .document
{
if ( (height + element_height) > page_height)
{
add page_break_element before current element
height = 0
}
height = height + element_height
}
Я бы использовал jquery , потому что это позволяет легко перемещаться по элементам, измерять высоту и т. д.
Думаю, разрыв абзацев тоже возможен, но это потребует много дополнительной работы.
CSS в основном применяет стили к полному элементу из-за его боксовой модели. Исключение составляют псевдоэлементы. Поэтому для создания соответствующего разрыва после фиксированной длины вам придется разделить текст на различные элементы правильного размера.
EDIT: Это было бы возможно с помощью javascript. Но даже в самом простом случае, когда все внутри страниц доставляется как один текстовый элемент без вложенных элементов (даже других текстовых элементов), код будет кошмаром разработчика и будет работать довольно плохо. Это происходит потому, что в javascript нет функции measure. Поэтому вы будете вынуждены методом проб и ошибок искать правильное положение для разрыва элемента. Поскольку свойства элементов являются живыми, это означает, что зритель сайта увидит много мерцаний вашей страницы сразу после загрузки. Если вы осмелитесь поместить внутрь html-элемента другие элементы для разбиения на страницы, вы получите еще больше проблем. Вы получите сотни особых случаев (взлом внутри других элементов, что если эти элементы находятся внутри еще более других элементов), на которые следует обратить внимание.