2010-11-08 26 views
6

içinde görüntülenecek karakter sınırını ayarlıyorum Bir JSON beslemesinden çekiyorum ve sadece azami 10 karakter dizisini görüntülemek istiyorum ve daha sonra bir ... daha sonra yapmak istiyorum. Bunu JQuery ile nasıl yapabilirim?Paragraf

+0

Sen zaten fazlasını elde etmek yazdım kod bazı içerecek şekilde soruyu düzenlemek "... köpek ove atlar" yerine "... köpek atlar" dönebilirsiniz tepkiler. Yeni kullanıcının aşağı inmesi için +1, listelenen bir neden olmadan oy kullanıldı. –

cevap

4

sen jquery gerekmez, JS bunu yapabilir:

 
string.substr(start,length) 

start The index where to start the extraction. First character is at index 0 
length The number of characters to extract. If omitted, it extracts the rest of the string 
6

Bunu bir hatayla engellemedim, bu nedenle zayıf dizinlemeyi ayarlamanız gerekebilir.

var txt = SomeStringFromFeed; 
if(txt.length > 10) 
{ 
    txt = txt.substr(0,10) + "..."; 
} 
return txt; 
11
Sen üç nokta kurmak için CSS kullanabilirsiniz

:

.myparagraph { 
    white-space: nowrap; 
    width: 10em; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Sonra herhangi jQuery için gerek yoktur veya diğer kodlama.

Referanslar: -

+1

CSS'nin harika kullanımı. Metin taşması hakkında bilgi sahibi olmadım, bunun hakkında daha fazla bilgi edinmem gerekecek. –

+0

CSS ellipsis, ancak sadece bir satırlık metinleri destekliyor – JoenasE

2

(Quirksmode.org genellikle CSS ve JavaScript şeyler için mükemmel bir kaynaktır ilk bağlantıyı dikkat edin)@spudley tarafından belirtilen CSS çözümünün çapraz tarayıcı olduğuna (firefox desteği yok) inanmıyorum. Tabi ki bununla ilgilendiğinizi varsayarsak. Sağladığı ilk bağlantı bile, sayfanın sağ üst köşesindeki sınırlı desteği belirtir.

Şimdi, ihtiyacınız olan şey için aşırı derecede iyi olabilecek küçük bir işleve sahip olduğumu söylemiştim, ancak bunu benzer durumlarda düzenli olarak kullandığımı buldum. Aşağıdaki kod yorumlanmıştır, ancak bunun ne anlama geldiği, sadece set limitine dayanan son tam sözcükten sonra bir üç nokta eklemektir.

Yani

// ============================================================================================== 
// Truncate a string to the given length, breaking at word boundaries and adding an elipsis 
//  @param str - String to be truncated 
//  @param limit - integer Max length of the string 
//  @returns a string 
// ============================================================================================== 

    function truncate(str, limit) { 
     var chars; 
     var i; 

     // check if what was passed as a string is actually a string 
     if (typeof(str) != 'string') { 
      return ''; 
     } 

     // create an array of the chars in the string 
     chars = str.split(''); 

     // if the length is greater than the set limit, process for truncating 
     if (chars.length > limit) { 
      // while the char count is greater than the limit, 
      for (i = chars.length - 1; i > -1; --i) { 
       // if char count is still greater, redefine the array size to the value of i 
       if (i > limit) { 
        chars.length = i; 
       } 
       // if char count is less than the limit keep going until you hit a space 
       // and redefine the array size to the value of i 
       else if (' ' === chars[i]) { 
        chars.length = i; 
        break; 
       } 
      } 
      // add elipsis to the end of the array 
      chars.push('...'); 
     } 
     // return the array as a string 
     return chars.join(''); 
    } 
+0

Elbette doğru, Firefox * tarafından desteklenmiyor * (yakında ümit ediyor musunuz?). Ancak diğer tüm tarayıcılar bunu destekliyor (IE5.5'e kadar bile IE), bu yüzden iyi bir kapsama alanı var ve Firefox bile doğru şekilde kırpıyor. Ayrıca, XUL kullanarak Firefox'ta çalışmasını sağlamak için hararetli işler var ... ama bu başka bir soru ve cevap. – Spudley

+0

@Spudley bu güzel bir çözüm. Ben bu çapraz tarayıcı işlevi ne zaman sabırsızlıkla bekliyorum. Ben sadece (ve bu soruya cevaplar için yanıltıcı olabilecek herhangi birinin), ihtiyaçlarının kendileri için umulduğu gibi çalışamayacağı bir çapraz tarayıcı çözümü gerektiriyor olmasından emin olmak istedim. –

+0

havalı. Bunu kullanmaya çalışacağım – JoenasE

İlgili konular