Node.js는 텍스트를 초과하면 줄임표가 된다는 것을 인식합니다.

실제 프로젝트에서는 텍스트 내용 길이의 불확실성과 페이지 레이아웃의 고정성으로 인해 텍스트 내용이 p(또는 다른 태그, 아래 동일) 영역을 초과하는 것이 불가피합니다. 더 나은 접근 방식은 텍스트를 다음과 같이 처리하는 것입니다. 제한된 p 너비를 초과하면 자동으로 줄임표(...)와 함께 표시됩니다. 이러한 방식으로 사용자는 여기에 생략된 텍스트가 있음을 알 수 있습니다. CSS에는 text-overflow:ellipsis라는 속성이 있습니다. 예를 들어 CSS를 사용하면 다음과 같이 작성할 수 있습니다.

{width:27em; text-overflow:ellipsis; :ellipsis;overflow:hidden;}Firefox 브라우저에서만 텍스트 오버플로 줄임표를 구현할 수 없으며 텍스트를 가운데에서 직접 클릭하면 이를 달성하기 위해 CSS를 사용하는 방법에 대해서는 설명하지 않습니다. 여기서 가장 중요한 것은 JS를 사용하여 구현하는 방법과 JS를 통해 간단한 구성 요소를 작성하는 방법에 대해 이야기하는 것입니다. JS의 초기화 메서드를 직접 호출하여 구현할 수 있습니다! 예를 들어, 다음 효과는 다음과 같습니다.

뒤에 점이 표시되어 이 효과를 완성하기 위해 표시되지 않은 콘텐츠가 더 있음을 사용자에게 상기시킵니다!

말도 안되는 소리부터 먼저 잘라보세요! 먼저 제가 만든 데모 효과를 보시면 어떤 효과인지 이해가 되실 겁니다!

효과를 보고 싶다면 클릭해주세요! 좋아요?

1 '...', 컨테이너의 길이가 기본값을 초과할 때 표시되는 유형은 줄임표입니다.

lineHeight 18, dom 노드의 기본 행 높이는 18입니다.

isShowTitle true, title 제목이 필요한지 여부 모든 내용 표시, 기본값은 true

isCharLimit false 문자 길이를 기준으로 줄임표 표시를 제한합니다.

maxLength 20 기본 길이는 20입니다. 20자를 초과하면 줄임표가 표시됩니다.

2: 분석

1. 먼저 이 구성 요소에 대해 이야기해 보겠습니다. 문자열을 가로채는 2가지 방법을 지원합니다. 첫째: 문자 길이에 따라 가로채고 이를 초과한 후에는 타원을 표시합니다. 예를 들어 다음과 같이 부릅니다.

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

이 초기화는 다음을 의미합니다. isCharLimit이 true이면 문자 수만큼 가로채겠다는 뜻입니다. 최대 길이 maxLength는 18입니다. 이렇게 초기화하면 코드가 먼저 isCharLimit이 true인지 확인한 다음 문자 수에 따라 직접 가로채기 때문입니다. 다음 코드는 다음과 같습니다.

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 텍스트에 표시되는 문자 수를 제어하기 위해 줄임표를 사용하는 방법이 초과됩니다

위 내용은 Node.js는 텍스트를 초과하면 줄임표가 된다는 것을 인식합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!