Comment puis-je mesurer combien de caractères correspondront à la largeur du document?

Question

J'ai besoin d'écrire, en JavaScript (j'utilise jQuery), une fonction qui est consciente du nombre de caractères qui correspondent à une ligne de la fenêtre du navigateur. J'utilise une police monospace pour faciliter le problème, mais il serait préférable de le généraliser pour différentes polices.

Comment puis-je savoir combien de caractères rempliraient une ligne dans le navigateur? L'intention est de compter le nombre de caractères qui remplissent une ligne.

Answer 1

Vous pouvez créer des éléments et y ajouter des caractères jusqu'à ce que vous détectiez l'habillage, par ex. en observant les changements dans offsetHeight (vous pouvez l'optimiser en utilisant l'algorithme de bissection). Cela dépend bien sûr du navigateur, du système, des polices installées et des paramètres de l'utilisateur. Vous devrez donc le calculer pour chaque fragment de texte à chaque fois que la page est affichée, redimensionnée ou lorsque l'utilisateur change la taille de la police (même en pleine page). zoom introduit des erreurs "off-by-one" qui pourraient provoquer le changement du nombre de caractères). Par conséquent, il peut s'agir d'une surcharge dans la plupart des situations et, lorsqu'il est mis en œuvre, il cause moins de problèmes qu'il n'en résout.

Il existe d'autres solutions, par ex. Si vous voulez vous assurer qu'une seule ligne est visible, vous pouvez utiliser white-space:nowrap et overflow:hidden et dans certains navigateurs text-overflow:ellipsis pour que le texte soit bien coupé. Ou si vous ne voulez pas que les mots soient coupés, utilisez un contenant de 1 ligne avec overflow:hidden.

Answer 2

Vous pouvez obtenir la largeur totale disponible pour le navigateur avec

window.innerWidth 

Et vous pouvez alors obtenir la largeur d'un élément avec la méthode suivante.

document.getElemenById('elem').clientWidth 

Answer 3

Il n'y a pas de moyen facile de le faire en HTML.

Toutefois, si vous devez vraiment savoir, vous pouvez probablement comprendre avec javascript vraiment moche:

Tout d'abord, créez un <div> avec la largeur dont vous avez besoin, mettre des caractères et demander son .height() en pixels. Ensuite, continuez à ajouter des caractères et continuez de vérifier le .height(), lorsque la hauteur du <div> change, vous savez qu'il a grandi pour s'adapter à une nouvelle ligne de texte.