スパンに表示される文字を制限する

Question

スパンで表示される文字を制限するためのHTMLやCSS内には何らかの方法がありますか？私はこれらの情報ボックスを表示するリピータを使用し、文字を最初の20文字に制限したいのですが、入力にさらに多くの文字が含まれる場合は、連結してください。ボックスには、画像に示すようなものです：

このための私のコードです：

<span class="claimedRight" maxlength="20">{{ item.provider }}</span> 

Answer 1

はここで、テキスト・オーバーフローを使用しての例です：

.text { 
 
    display: block; 
 
    width: 100px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
}

<span class="text">Hello world this is a long sentence</span>

Answer 2

max-lengthが使用されます。 input要素の場合CSSのtext-overflowプロパティを使用してください。

.claimedRight { 
    display:block; width: 250px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

Answer 3

あなたはCSS ellipsis;を使用することができますが、その要素に固定幅とoverflow:hidden:を与える必要があります。ソートの

<span style="display:block;text-overflow: ellipsis;width: 200px;overflow: hidden; white-space: nowrap;"> 
 
\t Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
 
\t </span>

Answer 4

はい、。

明示的サイズをフォントに単位相対用いた容器のサイズができる：

• 1EM =
• 1EX = X「の文字の垂直方向の高さ」「文字Mの横幅を」
次のような overflow:hidden; white-space:nowrap; text-overflow:ellipsis;助けるためにいくつかのCSSプロパティを使用することができますまた
• の1ch =「数の横幅は0」

数も制限してください。

Answer 5

利用JS：

$(document).ready(function() 
    { $(".class-span").each(function(i){ 
     var len=$(this).text().trim().length; 
     if(len>100) 
     { 
      $(this).text($(this).text().substr(0,100)+'...'); 
     } 
    }); 
});