jsはテキストを超えると省略記号になることに気づきました

実際のプロジェクトでは、テキストコンテンツの長さの不確実性とページレイアウトの固定性により、テキストコンテンツがp（またはその他のタグ、以下同様）の領域を超えることは避けられません。この場合、a。より良い方法は、制限された p 幅を超えると、テキストが自動的に省略記号 (...) で表示されるように扱うことです。この方法では、慣例に従って、ここに省略されたテキストがあることがわかります。 CSS には text-overflow:ellipsis というプロパティがあります。たとえば、CSS を使用すると次のように記述できます。 :ellipsis; overflow: hidden;} Firefox ブラウザでのみ、テキストのオーバーフロー省略記号を実現することはできません。CSS を使用してこれを実現する方法については説明しません。ここで最も重要なことは、JS を使用して実装する方法と、JS の初期化メソッドを直接呼び出して実装する方法について説明することです。たとえば、次のエフェクト:

の後にドットが続き、このエフェクトを完成させるために表示されていないコンテンツがさらにあることをユーザーに思い出させます。

最初にナンセンスをカットしてください!まずは、どんな効果があるのか​​を理解していただくために、私が作ったデモエフェクトを見てみましょう！

効果を確認したい場合は、私をクリックしてください!わかりました？

1 '...', コンテナの長さがデフォルトを超えたときに表示されるタイプは省略記号です

lineHeight 18, dom ノードのデフォルトの行の高さは 18 です

isShowTitle true, title タイトルが必要かどうかすべてのコンテンツを表示します。デフォルトは true です

isCharLimit false 文字の長さに基づいて省略記号の表示を制限します

maxLength 20 デフォルトの長さは 20 です。20 文字を超えると省略記号が表示されます

2: 分析

1. まず、このコンポーネントについて説明します。文字列をインターセプトする 2 つの方法をサポートしています。1 つ目: 文字の長さに応じてインターセプトし、それを超えた後に省略記号を表示します。たとえば、私は次のように呼び出します:

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

この初期化は、次のことを意味します。 isCharLimit が true の場合、文字数でインターセプトすることを意味します。最大長 maxLength は 18 です。コードは最初に isCharLimit が true であるかどうかを判断し、次に文字数に従って直接インターセプトするため、このように初期化されます。次のコード:

2. 2 番目のコードは、デフォルト設定などの行数と高さに基づいてインターセプトされます。項目の行の高さは 18 です。2 行を表示したい場合は、高さ h = を意味します。 18*2。コンテナの高さが 100 の場合、インターセプト方法は次のとおりです:

(100 - タイプの長さ - 1) を使用します。それが 18×2 より大きい場合はインターセプトを続けます。はインターセプトされず、省略記号効果が表示されます。次のコード:

短所: ただし、行の高さのインターセプトを使用する場合、データが比較的小さい場合は問題ありませんが、高さ 500 ピクセル以上など、データが多い場合は、相対的に毎回 n 回計算する必要があるため、パフォーマンスに影響します (n は、ループ内で呼び出される関数が多数あることを意味します)。

すべての JS コードは次のとおりです:

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

関連する推奨事項:

CSS は表示される文字数を制限し、省略記号を使用して超過を示します

タイトルのときに省略記号 '...' を表示する方法テキストのオーバーフロー

html 省略記号を使用してテキストに表示される文字数を制御する方法が

を超えています

以上がjsはテキストを超えると省略記号になることに気づきましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。