Limitare i caratteri visualizzati nell'intervallo

Question

Esiste un modo in HTML o CSS per limitare i caratteri visualizzati con uno span? Io uso un ripetitore che visualizza queste informazioni e voglio limitare i caratteri ai primi 20 caratteri e se l'input ha più, quindi concatenare semplicemente? La scatola è come immagine indicata:

Il mio codice per questo è:

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

Answer 1

Ecco un esempio di utilizzo di text-overflow:

.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 viene utilizzato per gli elementi input. Usa la proprietà text-overflow di CSS.

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

Answer 3

È possibile utilizzare i CSS ellipsis; ma bisogna dare larghezza fissa e overflow:hidden: a quell'elemento.

<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

Sì, più o meno.

È esplicitamente possibile dimensionare un contenitore utilizzando unità rispetto a font-size:

• 1em = 'la larghezza orizzontale della lettera m'
• 1ex = 'l'altezza verticale della lettera x'
• 1ch = 'la dimensione orizzontale del numero 0'

Inoltre è possibile utilizzare alcune proprietà CSS come overflow:hidden;white-space:nowrap;text-overflow:ellipsis; per aiutare limitare il numero pure.

Answer 5

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