文字長度限制不起作用在我instafeed模板

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圖像。然後，您可以在template字符串內使用{{model.short_caption}}來代替{{caption}}。

（設置MAX_LENGTH變量是你想要的最大長度爲標題）基於評論

---

更新：如果您想根據最近的字尾要限制你的文字，你就會有在過濾器中添加更多的邏輯。由於過濾器函數只是普通的JavaScript，因此您可以在其中添加任何類型的邏輯。

這裏有一個辦法一個簡單的例子，你可以找到在普通的JavaScript的子串最接近的字尾：

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)

於是用額外的邏輯更新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）