Limiter les caractères affichés dans la plage

Est-il une sorte de passage dans le code HTML ou CSS pour limiter les caractères affichés avec un span? Je utiliser un répéteur qui affiche ces boîtes info et je veux limiter les caractères les 20 premiers caractères et si l'entrée a de plus, puis il suffit de concaténer? La boîte est comme image montrée:

Limiter les caractères affichés dans la plage

Mon code c'est:

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

source d'informationauteur Mark

  1. 1

    max-length est utilisé pour input éléments. Utilisation text-overflow propriété de feuille de style CSS.

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

    Oui, en quelque sorte.

    Vous pouvez explicitement la taille d'un conteneur à l'aide d'unités par rapport à font-size:

    • Cadratin (1 em = 'la largeur horizontale de la lettre m'
    • 1ex = 'la hauteur de la lettre x'
    • 1ch = 'la largeur horizontale du numéro de 0'

    En outre, vous pouvez utiliser quelques propriétés CSS comme overflow:hidden; white-space:nowrap; text-overflow:ellipsis; afin de limiter le nombre ainsi.

  3. 0

    utiliser 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)+'...');
        }
    });
 });