Question

您好我有一个instafeed的模板，现在我需要限制标题的长度。我添加到js代码来做它但它不起作用。有没有办法缩短<p><i>{{caption}}</i></p>并添加省略号。

这是我的代码：

$(function(){
            $(".caption").each(function(i){
                len=$(this).text().length;
                if(len>10)
                {
                    $(this).text($(this).text().substr(0,10)+'...');
                }
            });
        });

        /* Intafeed and SimplyScroll */
        var feed = new Instafeed({
            target: 'instagram-list',
            get: 'user',
            userId: 1713392078,
            accessToken: '0000000',
            clientId: '0000000',
            limit: '30',
            sortBy: 'most-recent',
            link: 'true',
            template: '<li><figure class="effect-honey background-black1"><figcaption><p><i class"caption">{{caption}}</i></p></figcaption><a href="{{link}}" target="_blank"><img src="{{image}}" alt"{{caption}}"/></a><span class="instagram-metadata shadow">{{likes}} <span class="instagram-like"></span></span></figure></li>',
            resolution: 'low_resolution',
            after: function() {
                $("#instagram-list").simplyScroll({
                    speed: 1,
                    frameRate: 24,
                    orientation: 'horizontal',
                    direction: 'forwards',
                })
            }
        })

        feed.run();

Answer 1

您可以使用Instafeed.js提供的内置filter选项来完成。

即使filter选项主要用于过滤图片，您也可以使用它来修改图像数据，然后再将其发送到template字符串。

因此，请使用以下内容更新Instafeed.js设置：

var feed = new Instafeed({
    target: 'instagram-list',
    get: 'user',
    userId: 1713392078,
    accessToken: '0000000',
    clientId: '0000000',
    limit: '30',
    sortBy: 'most-recent',
    link: 'true',
    filter: function(image) {
      var MAX_LENGTH = 10;

      // here we create a property called "short_caption"
      // on the image object, using the original caption
      if (image.caption && image.caption.text) {
        image.short_caption = image.caption.text.slice(0, MAX_LENGTH);
      } else {
        image.short_caption = "";
      }

      // ensure the filter doesn't reject any images
      return true;
    },

    template: '<li><figure class="effect-honey background-black1"><figcaption><p><i class"caption">{{model.short_caption}}</i></p></figcaption><a href="{{link}}" target="_blank"><img src="{{image}}" alt"{{model.short_caption}}"/></a><span class="instagram-metadata shadow">{{likes}} <span class="instagram-like"></span></span></figure></li>',
    resolution: 'low_resolution',
    after: function() {
        $("#instagram-list").simplyScroll({
            speed: 1,
            frameRate: 24,
            orientation: 'horizontal',
            direction: 'forwards',
        })
    }
})

feed.run();

这将为每个名为short_caption的图像指定一个新属性。然后，您可以在{{model.short_caption}}字符串中使用{{caption}}代替template。

（将MAX_LENGTH变量设置为您想要的最大字幕长度）

根据评论进行更新：如果您希望根据最接近的字词来限制文字，则必须在过滤器中添加更多逻辑。由于过滤器功能只是普通的JavaScript，因此您可以添加任何类型的逻辑。

以下是一种快速示例，您可以在纯JavaScript中找到最接近子字符串结尾的单词：

＆＃13;

var MAX_LENGTH = 100;

var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis felis dolor, in volutpat erat hendrerit ut. Mauris auctor quam at nulla tincidunt aliquam. Vivamus facilisis adipiscing lacus, vel dignissim nulla imperdiet nec. Donec fermentum, urna vel adipiscing vehicula, ante odio scelerisque tortor, vitae auctor eros tortor eu massa";
var trimmedText;

var closestIndex = MAX_LENGTH;
while(true) {
  if (text.charAt(closestIndex) === ' ') {
    break;
  }
  closestIndex -= 1;
}

trimmedText = text.slice(0, closestIndex) + '...';

alert(trimmedText)

＆＃13;

因此，请使用我在上面展示的示例中修改的其他逻辑更新您的filter函数：

filter: function(image) {
  var MAX_LENGTH = 100;
  var closestIndex = MAX_LENGTH;

  if (image.caption && image.caption.text) {
    while(true) {
      if (text.charAt(closestIndex) === ' ') {
        break;
      }
      closestIndex -= 1;
    }
    image.short_caption = image.caption.text.slice(0, MAX_LENGTH);
  } else {
    image.short_caption = "";
  }

  return true;
},

Answer 2

使用pure css截断文字并添加省略号，它会更快，更易于维护

有.js库用于渲染文本省略号（例如jquery.ellipsis）

文本长度限制在我的instafeed模板中不起作用

2 个答案: