Utilisez la disposition flexible dans le calque externe, définissez le nombre de lignes de hauteur ou donnez la hauteur maximale max-height dans le calque externe Placez le texte en p dans le calque interne et affichez-le normalement
L'idée est de juger en fonction de la hauteur de la ligne. Une fois que la hauteur de la ligne est supérieure à 1 hauteur de ligne, cela signifie qu'il y a deux lignes de contenu. Voici le code :
Pour donner une idée, vous pouvez définir la hauteur de ligne sur 20 px, puis une fois la page rendue, utilisez l'attribut offsetHeight du nœud en js, offsetHeight / 20est le nombre de lignes
Utilisez la disposition flexible dans le calque externe, définissez le nombre de lignes de hauteur ou donnez la hauteur maximale max-height dans le calque externe
Placez le texte en p dans le calque interne et affichez-le normalement
Structure HTML :
Alors jugez de la hauteur des deux :
Cette fois, "Afficher plus" s'affiche
L'idée est de juger en fonction de la hauteur de la ligne. Une fois que la hauteur de la ligne est supérieure à 1 hauteur de ligne, cela signifie qu'il y a deux lignes de contenu. Voici le code :
html est le suivant :
js est le suivant :
Le code n'est pas facile, veuillez l'aimer si vous l'aimez~
Ensuite, jugez la hauteur du rang
Le texte actuel doit avoir un dom séparé, obtenir sa hauteur et sa hauteur de ligne et les calculer dynamiquement
Pour donner une idée, vous pouvez définir la hauteur de ligne sur 20 px, puis une fois la page rendue, utilisez l'attribut offsetHeight du nœud en js,
offsetHeight / 20
est le nombre de lignesutiliser
C'est ça