js erkennt, dass das Überschreiten des Textes zu Auslassungspunkten wird

In tatsächlichen Projekten ist es aufgrund der Unsicherheit der Länge des Textinhalts und der Festlegung des Seitenlayouts unvermeidlich, dass der Textinhalt den p-Bereich (oder andere Tags, siehe unten) überschreitet Ein besserer Ansatz ist: Wenn der Text die begrenzte p-Breite überschreitet, wird er automatisch mit Auslassungspunkten (...) angezeigt. Auf diese Weise wissen die Benutzer entsprechend der Sitte, dass hier Text ausgelassen wurde. Es gibt eine Eigenschaft in CSS namens text-overflow:ellipsis; mit CSS können Sie sie beispielsweise so schreiben:

{width:27em; text-overflow:ellipsis; ; -o-text- overflow:ellipsis; overflow:hidden;} Nur im Firefox-Browser kann die Textüberlaufdarstellung nicht direkt aus der Mitte heraus angeklickt werden Dies ist die spezifische CSS-Implementierung. Für mich ist es hier am wichtigsten, darüber zu sprechen, wie ich eine einfache Komponente über JS schreiben kann JS, um es umzusetzen! Beispielsweise der folgende Effekt: Die Punkte nach

weisen den Benutzer darauf hin, dass weitere Inhalte nicht angezeigt werden, um diesen Effekt abzuschließen!

Schneiden Sie zuerst den Unsinn! Schauen wir uns zunächst den Demoeffekt an, den ich erstellt habe, damit Sie verstehen, was der Effekt ist!

Wenn Sie den Effekt sehen möchten, klicken Sie bitte auf mich! OK?

1: Schauen wir uns zunächst die Konfigurationselemente der Komponente an: wie folgt:

targetCls

null, Die erforderlichen Elemente, damit der Container vom abgefangen werden kann Ziel ist standardmäßig null

limitLineNumber 1, Die Anzahl der anzuzeigenden Zeilen ist standardmäßig 1 Zeile

Typ '...', Der angezeigte Typ überschreitet die Länge des Containers. Der Standardwert ist Auslassungspunkte

lineHeight 18, Die Zeilenhöhe des Dom-Knotens. Die Standardzeilenhöhe beträgt 18

isShowTitle true, Erfordert der Titel einen Titel, um den gesamten Inhalt anzuzeigen? Der Standardwert ist true

isCharLimit false Begrenzen Sie basierend auf der Länge der Zeichen die angezeigten Auslassungspunkte auf mehr als

maxLength 20. Die Standardlänge beträgt 20. Nach 20 Zeichen wird ein Auslassungspunkt angezeigt

2: Analyse

1. Lassen Sie uns zunächst über diese Komponente sprechen: Sie unterstützt zwei Möglichkeiten zum Abfangen von Zeichenfolgen, erstens: entsprechend der abzufangenden Zeichenlänge, und nach Überschreitung werden Auslassungspunkte angezeigt. Ich nenne sie beispielsweise so:

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

Diese Initialisierung bedeutet, dass, wenn isCharLimit wahr ist, die maximale Länge maxLength 18 beträgt. Auf diese Weise initialisiert, da der Code zuerst ermittelt, ob isCharLimit wahr ist. Es wird direkt entsprechend der Anzahl der Zeichen abgefangen, beispielsweise der folgende Code:

2. Der zweite Code wird basierend auf der Anzahl der Zeilen und der Höhe abgefangen, beispielsweise der Zeilenhöhe des Standardkonfigurationselements ist 18. Wenn ich 2 Zeilen anzeigen möchte, bedeutet das, dass die Höhe h = 18*2 ist. Wenn die Höhe des Containers 100 beträgt, lautet die Abfangmethode:

Verwenden Sie ( 100 – Die Länge des Typs - 1) Ist es größer als 18×2? Wenn es größer ist, fahren Sie mit dem Abfangen fort, sonst wird es nicht abgefangen und der Ellipseneffekt wird angezeigt! Der folgende Code:

Nachteile: Wenn Sie jedoch das Abfangen der Zeilenhöhe verwenden, ist es in Ordnung, wenn die Daten relativ klein sind. Wenn jedoch viele Daten vorhanden sind, z. B. eine Höhe von 500 Pixeln oder mehr, Dies wirkt sich relativ stark auf die Leistung aus, da jedes Mal n-mal berechnet werden muss (n bedeutet, dass in einer Schleife viele Funktionen aufgerufen werden).

Alle JS-Codes lauten wie folgt:

/*
 
* 基于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
 
};

Verwandte Empfehlungen:

CSS-Grenze für Anzeigewörter überschreitet die Ellipsen zur Anzeige von

So zeigen Sie die Auslassungspunkte „...“ an, wenn der Titeltext überläuft

So verwenden Sie die Auslassungspunkte, wenn die HTML-Textsteuerungsanzeige die Wortanzahl überschreitet

Das obige ist der detaillierte Inhalt vonjs erkennt, dass das Überschreiten des Textes zu Auslassungspunkten wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!