Comment trouver la première ligne dans l'habillage automatique html

Question

En supposant que j'ai un div avec une largeur fixe et du texte d'emballage automatique à l'intérieur. Maintenant, je veux insérer un élément span à la fin de la première ligne. Parce que le texte n'est pas écrit dans une structure spécifique, la première ligne pourrait contenir cinq mots ainsi que trois ou un seul. Donc, je devrais trouver la position sur laquelle la rupture de ligne automatique se produit. Est-ce possible ou dois-je insérer un manuel br ou un marqueur?

Answer 1

C'est douloureusement possible. La question est pourquoi essayez-vous de faire cela? Il peut y avoir un moyen plus facile d'accomplir ce dont vous avez besoin.

Si vous décidez que vous avez encore besoin de faire cela, ce que vous auriez à faire est de créer un clone de ce div qui ne peut pas être vu. Vous définiriez la hauteur de cette div clonée à 1px ou quelque chose comme ça. Vous pouvez ensuite remplir ce clone avec un texte identique mot par mot. Une fois que le scrollHeight de la div saute, vous savez que le premier mot wrap a eu lieu. Vous pouvez ensuite utiliser ces données pour déterminer où la première ligne du paragraphe d'origine a le mot enveloppé.

Answer 2

Vous avez besoin d'ajouter ou un marqueur. Le navigateur différent calcule combien de mots devraient être placés dans la première ligne. Et si l'utilisateur change le réglage du navigateur, par exemple augmenter la taille de la police, la première ligne va changer le nombre de mots.