Mise en page CSS w/Breaks

Question

J'essaye de faire une page Web où il ressemble fondamentalement à un document de mot. Il y aurait plusieurs boîtes qui défileraient vers le bas et le texte coulerait et la page casserait d'une page à l'autre.

Est-ce que quelqu'un a une idée de l'endroit où je commencerais? Merci.

Edit: Il devrait être directement dans le navigateur, à la recherche de ce type:

(Ignorer les colonnes)

Answer 1

Quelque chose comme cela semble possible en utilisant javascript, mais cela dépend un peu de la structure de votre code html et si vous voulez briser les paragraphes ou tout simplement déplacer le paragraphe suivant à la page suivante si elle correspond

Indifférent Fume

Ainsi, l'exemple le plus simple, ne pas casser les paragraphes/éléments HTML avec une structure HTML plat (pas de divs imbriqués, colonnes, etc) comme:

<div class="document"> 
    <h1>title</h1> 
    <p>texts</p> 
    <h2>subtitle</h2> 
    <p>texts</p> 
    ... 
    <p>texts</p> 
</div> 

serait de faire quelque chose comme:

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 
} 

utiliser jquery parce Id il facilite la boucle à travers les éléments, mesurer la hauteur, etc.

Je suppose que cassais les paragraphes seraient aussi possibles, mais beaucoup de travail supplémentaire.

Answer 2

<p style="page-break-before: always">This would print on the next page</p>

Answer 3

CSS applique la plupart des styles à un élément plein en raison de sa box model. Les exceptions sont pseudo elements. Donc, pour créer une pause appropriée après une longueur fixe, vous devez séparer votre texte en éléments différents correctement dimensionnés.

EDIT: Il serait possible d'utiliser javascript. Mais même dans le cas le plus simple, où tout ce qui est contenu dans les pages est un élément de texte sans sous-éléments (pas même d'autres éléments textuels), le code sera un cauchemar pour le développement et tournera mal. C'est parce qu'il n'y a pas de fonction de mesure en javascript. Donc, vous seriez obligé de faire une trace et une erreur pour trouver la position correcte pour casser l'élément. Puisque les propriétés des éléments sont en direct, cela signifie que le spectateur du site verra beaucoup de scintillement de votre page juste après le chargement. Si vous osez mettre d'autres éléments dans l'élément html pour entrer dans les pages, vous aurez encore plus de problèmes. Plus ou moins vous obtenez des centaines de cas spéciaux (casser à l'intérieur d'autres éléments, et si ces éléments sont à l'intérieur même d'autres éléments) à surveiller.