JavaScript affiche l'effet d'ellipsis après avoir dépassé le conteneur
Dans les projets réels, en raison de l'incertitude de la longueur du contenu texte et de la fixation de la disposition de la page, il est inévitable que le contenu texte dépasse la zone div (ou d'autres balises, la même ci-dessous). La meilleure façon à ce moment est de l'afficher automatiquement dans une ellipsis (…) lorsque le texte dépasse la largeur de div limitée. De cette façon, selon la coutume, les gens sauront qu'il y a des textes ici qui sont omis. Il y a une propriété dans CSS appelée Text-Overflow: EllipSis; Par exemple, vous pouvez l'écrire comme celui-ci en utilisant CSS:
{Largeur: 27EM; Espace blanc: Nowrap; Text-overflow: ellipsis; -o-text-overflow: ellipsis; Overflow: Hidden;} L'ellipsis de débordement de texte ne peut pas être implémenté dans le navigateur Firefox seul, et le texte est directement déposé du milieu. Je ne parle pas comment utiliser CSS pour implémenter cela. L'implémentation CSS spécifique peut être utilisée sur Baidu. La chose la plus importante ici est de savoir comment l'implémenter avec JS et comment écrire un composant simple via JS. Je peux appeler directement la méthode d'initialisation de JS pour l'implémenter! Par exemple, les effets suivants:
Les points et les points dans le dos invitent à l'utilisateur qu'il y a plus de contenu qui n'a pas été affiché pour terminer un tel effet!
Dites d'abord moins de bêtises! Tout d'abord, jetons un coup d'œil à l'effet de démo que j'ai fait et vous comprendrez ce que c'est!
Si vous voulez voir l'effet, cliquez sur moi! D'ACCORD?
1: Jetons d'abord un coup d'œil aux éléments de configuration des composants:
Targetcls
NULL, les éléments requis pour que le conteneur soit intercepté par la cible est nul par défaut
LimitLineNumber 1, le nombre de lignes à afficher est 1 ligne par défaut
Tapez '...', Type qui dépasse la longueur du conteneur s'affiche par défaut en ellipsis
LineHeight 18, la hauteur de ligne par défaut du nœud Dom est de 18
ISShowTitle True, le titre est nécessaire pour afficher tous les contenus. La valeur par défaut est vraie
ISCHARLIMIT FAUX LIMITES pour afficher les ellipses en fonction de la longueur du caractère
MaxLength 20 La longueur par défaut est de 20. L'ellipsis sera affiché après avoir dépassé le caractère 20.
Deux: analyse
1. Tout d'abord, parlons de ce composant: soutenons deux façons d'intercepter les chaînes. Premièrement: intercepter en fonction de la longueur des caractères et afficher l'ellipsis après les avoir dépassés. Par exemple, je l'appelle comme ceci:
Nouveau multiellipsis ({
"Targetcls": '.Text8',
"ischarlimit": vrai,
"MaxLength": 18
});
L'initialisation de cette manière signifie que l'ischarlimit est vrai, ce qui signifie intercepter le nombre de caractères. La longueur maximale MaxLength est de 18. L'initialisation de cette manière, car le code déterminera d'abord que si IsCharlimit est vrai, il sera directement intercepté en fonction du nombre de caractères, tels que le code suivant:
2. Le deuxième type est intercepté en fonction du nombre de lignes et de hauteurs. Par exemple, la hauteur de ligne de l'élément de configuration par défaut est 18. Si je veux afficher 2 lignes, c'est-à-dire la hauteur h = 18 * 2. Si la hauteur du conteneur est de 100, alors la méthode d'interception est:
Utiliser (100 - longueur de type - 1) s'il est supérieur à 18 × 2, s'il est supérieur à que, continuez d'intercepter, sinon il n'interceptera pas, et l'effet d'ellipsie sera affiché! Le code suivant:
Inconvénients: Cependant, si vous utilisez une interception à haut rang, il est correct que les données soient relativement faibles, mais s'il y a beaucoup de données, comme une hauteur de 500 pixels ou plus, cela affectera relativement les performances, car ils doivent calculer n fois à chaque fois (n signifie qu'il existe de nombreuses fonctions qui font des appels).
Tous les codes JS sont les suivants:
Copier le code
/ * * MultiellipSis basé sur js * @author tugenhua * / fonction multitalipsis (options) {var self = this; self.options = $ .extend ({}, par défaut, options || {}); self._init (); } $ .extend (MultiellipSis.prototype, {// Page initialisation_init: function () {var self = this, cfg = self.options; if (cfg.targetcls == null || $ (cfg.targetcls + "") [0] === InsEFINE vide! ");} return;} if (cfg.isshowtitle) {// ajouter l'attribut de titre pour obtenir le texte de l'élément var title = self.getText (); $ (cfg.targetcls) .Attr ({" title ": title});} // si c'est limité par des caractères, puis retourne directement sans comparer la hauteur sans comparer à la hauteur; {self.__; } self._CompareHeight (cfg.lineHeight * cfg.limitlineNumber);}, / * * Comparez le texte en fonction de la longueur de la nouvelle chaîne dans le conteneur * / _Charcompare: function () @return (var Self. if (Text.Length> CFG.MaxLength) {var CurText = Text.SubString (0, Cfg.MaxLength); Html Contenu * @Method GetText {public} * / getText: function () {var self = this, cfg = self.options; cfg = self.options; $ ($ (cfg.targetcls + "") [0]). html (texte);}, / * * }, / * * Nombre de lignes passant par l'élément de configuration * est la hauteur de ligne d'une ligne supérieure ou égale à la hauteur actuelle * @Method _CompareHeight {private} * / _compareHeight: function (maxlineHeight) {var self = this; self._deleTeText (self.getText ());}}, / * * Intercept Text * @Method _DeleTeText {private} * @return Renvoie le texte intercepté * / _DeleTeText: Function (Text) {var self = this, cfg = self. typelen - 1); self.options; return $ ($ (cfg.targetcls + "") [0]. var par défaut = {'TargetCls': null, // Le conteneur à intercepter par le Target'limitlineNumber ': 1, // le nombre de lignes limité par le nombre de lignes * la hauteur de ligne d'une ligne> = la hauteur du «type» du conteneur:' ... '', // Le type qui dépasse la longueur de la ligne de défaut est l'ellipsis ' Node'isshowTitle ': true, // si le titre affiche tout le contenu est vrai par défaut' isCharlimit ': false, // l'affichage ellipsis est limité par la longueur du caractère' maxLength ': 20 // par défaut est 20};La méthode ci-dessus pour afficher l'effet EllipSis après JavaScript dépasse le conteneur (compatible avec une ligne ou plusieurs lignes) est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.