Maison  >  Article  >  interface Web  >  Comment implémenter la pagination HTML pour les navigateurs WebKit : garantir des morceaux de texte à la taille de l'écran ?

Comment implémenter la pagination HTML pour les navigateurs WebKit : garantir des morceaux de texte à la taille de l'écran ?

Barbara Streisand
Barbara Streisandoriginal
2024-10-26 16:37:02344parcourir

How to Implement HTML Pagination for WebKit Browsers: Ensuring Screen-Sized Chunks of Text?

Pagination HTML : création de morceaux de taille d'écran pour les navigateurs WebKit

Question :

Comment partitionner le contenu textuel de un document HTML en sections de la taille d'un écran pour la pagination dans les navigateurs WebKit, garantissant que chaque « page » affiche une unité complète de texte sans diviser les lignes à travers les limites de l'écran ?

Réponse :

Pour réaliser la pagination HTML dans les navigateurs WebKit, la solution JavaScript et CSS suivante peut être utilisée :

<code class="javascript">var desiredHeight;
var desiredWidth;
var bodyID = document.getElementsByTagName('body')[0];
totalHeight = bodyID.offsetHeight;
pageCount = Math.floor(totalHeight / desiredHeight) + 1;
bodyID.style.padding = 10; //(optional) prevents clipped letters around the edges
bodyID.style.width = desiredWidth * pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.WebkitColumnCount = pageCount;</code>

Ce code définit la hauteur et la largeur souhaitées de chaque page (desiredHeight et wantedWidth). Il calcule la hauteur totale du document (totalHeight) et détermine le nombre de pages requises (pageCount).

Le remplissage de l'élément body est ajusté pour éviter que le texte ne soit coupé sur les bords, ainsi que sa largeur et sa hauteur. sont définis pour s’adapter aux dimensions de page souhaitées. Enfin, la propriété WebkitColumnCount est utilisée pour créer des colonnes pour le contenu paginé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn