js se rend compte que dépasser le texte devient des points de suspension

Dans les projets réels, en raison de l'incertitude de la longueur du contenu du texte et de la fixité de la mise en page, il est inévitable que le contenu du texte dépasse la zone p (ou d'autres balises, les mêmes ci-dessous). , une meilleure approche est que lorsque le texte dépasse la largeur p limitée, il est automatiquement affiché avec des points de suspension (...) De cette façon, selon la coutume, les gens sauront qu'il y a du texte ici qui a été omis. Il existe une propriété en CSS appelée text-overflow:ellipsis ; par exemple, en utilisant CSS, vous pouvez l'écrire comme ceci :

{width:27em; text-overflow:ellipsis; ; -o-text- overflow:ellipsis; overflow:hidden;} Uniquement dans le navigateur Firefox, la représentation des points de suspension de débordement de texte ne peut pas être réalisée. Le texte est cliqué directement à partir du milieu. Je ne parlerai pas de la façon d'utiliser le CSS pour y parvenir. Ceci. L'implémentation CSS spécifique Vous pouvez accéder à Baidu vous-même. La chose la plus importante pour moi ici est de parler de la façon d'utiliser JS pour l'implémenter et de comment écrire un composant simple via JS. Je peux directement appeler la méthode d'initialisation de. JS pour l'implémenter ! Par exemple, l'effet suivant : Les points après

indiqueront à l'utilisateur qu'il y a plus de contenu qui n'est pas affiché pour compléter cet effet !

Arrêtez d'abord les bêtises ! Tout d’abord, jetons un coup d’œil à l’effet de démonstration que j’ai réalisé, afin que vous puissiez comprendre quel est l’effet !

Si vous voulez voir l'effet, cliquez sur moi ! D'ACCORD?

1 : Jetons d'abord un coup d'œil aux éléments de configuration du composant : comme suit :

targetCls

null, Les éléments requis pour que le conteneur soit intercepté par le target par défaut est null

limitLineNumber 1, Le nombre de lignes à afficher par défaut est 1 ligne

type '...', Le type affiché dépasse la longueur du conteneur. points de suspension

lineHeight 18, La hauteur de ligne du nœud dom La hauteur de ligne par défaut est 18

isShowTitle true, Le titre nécessite-t-il un titre pour afficher tout le contenu ? >isCharLimit false En fonction de la longueur des caractères, limitez les points de suspension d'affichage dépassant

maxLength 20. La longueur par défaut est de 20. Les points de suspension

sont affichés après 20 caractères 2 : Analyse

1. Parlons d'abord de ce composant : il prend en charge 2 façons d'intercepter des chaînes. Premièrement : selon la longueur des caractères à intercepter, et des points de suspension s'afficheront après l'avoir dépassée. Par exemple, je l'appelle comme ceci :

Cette initialisation signifie que si isCharLimit est vrai, cela signifie intercepter par le nombre de caractères. La longueur maximale maxLength est de 18. Initialisé de cette manière, car le code déterminera d'abord si isCharLimit est vrai, il interceptera directement en fonction du nombre de caractères, comme le code suivant :

2. Le second est intercepté en fonction du nombre de lignes et de la hauteur, par exemple, la hauteur de ligne de l'élément de configuration par défaut est. 18. Si je veux afficher 2 lignes, cela signifie la hauteur h = 18*2. Si la hauteur du conteneur est de 100, alors la méthode d'interception est :

new MultiEllipsis
({ "targetCls" :
 '.text8', 
 "isCharLimit":
 true, "maxLength": 18
  });

Utiliser ( 100 - La longueur du type. - 1) Est-il supérieur à 18×2 ? Si oui, continuez à intercepter, sinon il n'interceptera pas et l'effet de points de suspension sera affiché ! Le code suivant :

Inconvénients : Cependant, si vous utilisez l'interception de la hauteur de ligne, ce n'est pas grave si les données sont relativement petites, 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 y a de nombreuses fonctions appelées dans une boucle).

Tous les codes JS sont les suivants :

Recommandations associées :

/*
 
* 基于JS的MultiEllipsis
 
* @author tugenhua
 
*/
 
function MultiEllipsis(options) {
 
  var self = this;
 
  self.options = $.extend({},defaults,options || {});
 
  self._init();
 
}
 
$.extend(MultiEllipsis.prototype,{
 
   // 页面初始化
 
  _init: function(){
 
    var self = this,
 
      cfg = self.options;
 
    if(cfg.targetCls == null || $(cfg.targetCls + "")[0] === undefined) {
 
      if(window.console) {
 
        console.log("targetCls不为空!");
 
      }
 
      return;
 
    }
 
    if(cfg.isShowTitle) {
 
      // 获取元素的文本 添加title属性
 
      var title = self.getText();
 
      $(cfg.targetCls ).attr({"title":title});
 
    }
 
    // 如果是按照字符来限制的话 那么就不按照高度来比较 直接返回
 
    if(cfg.isCharLimit) {
 
      self._charCompare();
 
      return;
 
    }
 
    self._compareHeight(cfg.lineHeight * cfg.limitLineNumber);
 
  },
 
  /*
 
   * 按照字符的长度来比较 来显示文本
 
   * @method _charCompare {private}
 
   * @return 返回新的字符串到容器里面
 
   */
 
  _charCompare: function(){
 
    var self = this,
 
      cfg = self.options;
 
    var text = self.getText();
 
    if(text.length > cfg.maxLength) {
 
      var curText = text.substring(0,cfg.maxLength);
 
      $($(cfg.targetCls + "")[0]).html(curText + cfg.type);
 
    }
 
  },
 
  /*
 
   * 获取目标元素的text
 
   * 如果有属性 data-text 有值的话 那么先获取这个值 否则的话 直接去html内容
 
   * @method getText {public}
 
   */
 
  getText: function(){
 
    var self = this,
 
      cfg = self.options;
 
    return $.trim($($(cfg.targetCls + "")[0]).html());
 
  },
 
  /*
 
   * 设置dom元素文本
 
   * @method setText {public}
 
   */
 
  setText: function(text){
 
    var self = this,
 
      cfg = self.options;
 
    $($(cfg.targetCls + "")[0]).html(text);
 
  },
 
  /*
 
   * 通过配置项的 行数 * 一行的行高 是否大于或者等于当前的高度
 
   * @method _compareHeight {private}
 
   */
 
  _compareHeight: function(maxLineHeight) {
 
    var self = this;
 
    var curHeight = self._getTargetHeight();
 
    if(curHeight > maxLineHeight) {
 
      self._deleteText(self.getText());
 
    }
 
  },
 
  /*
 
   * 截取文本
 
   * @method _deleteText {private}
 
   * @return 返回被截取的文本
 
   */
 
  _deleteText: function(text){
 
    var self = this,
 
      cfg = self.options,
 
      typeLen = cfg.type.length;
 
    var curText = text.substring(0,text.length - typeLen - 1);
 
    curText += cfg.type;
 
    // 设置元素的文本
 
    self.setText(curText);
 
    // 继续调用函数进行比较
 
    self._compareHeight(cfg.lineHeight * cfg.limitLineNumber);
 
  },
 
  /*
 
   * 返回当前dom的高度
 
   */
 
  _getTargetHeight: function(){
 
    var self = this,
 
      cfg = self.options;
 
    return $($(cfg.targetCls + "")[0]).height();
 
  }
 
});
 
var defaults = {
 
  'targetCls'        :   null,         // 目标要截取的容器
 
  'limitLineNumber'     :   1,           // 限制的行数 通过 行数 * 一行的行高 >= 容器的高度
 
  'type'          :   '...',         // 超过了长度 显示的type 默认为省略号
 
  'lineHeight'       :   18,         // dom节点的行高
 
  'isShowTitle'       :    true,        // title是否显示所有的内容 默认为true
 
  'isCharLimit'       :   false,        // 根据字符的长度来限制 超过显示省略号
 
  'maxLength'        :   20          // 默认为20
 
};

La limite de mots d'affichage de la limite CSS dépasse les points de suspension pour indiquer

Comment afficher les points de suspension '...' lorsque le texte du titre déborde

Comment utiliser les points de suspension lorsque l'affichage du contrôle de texte HTML dépasse le nombre de mots

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!