Tronca i collegamenti lunghi in Bootstrap

Question

Sto progettando una pagina utilizzando Bootstrap 3.1 in cui, se la lunghezza di un collegamento HTML è troppo lunga, essa viene espulsa e crea una scroll orizzontale nella versione mobile. C'è un modo per troncarlo e sostituirlo con ellissi?

Esempio:

cosa ho bisogno è che invece di estendere fuori, dovrebbe avere troncato prima del confine. Qualche idea su come farlo?

Answer 1

È necessario fare in modo che il contenitore ha overflow: hidden per mantenere il testo che scorre al di fuori del confine e dare text-overflow: ellipsis per dare il link i puntini di sospensione.

.box { 
 
    background: #f99; 
 
    border: 1px solid #c66; 
 
    width: 100px; 
 
    padding: 7px; 
 
    margin-bottom: 15px; 
 
} 
 

 
.nowrap { 
 
    white-space: nowrap; 
 
} 
 

 

 
.ellipsis { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="box"> 
 
    <span class="nowrap">A really long piece of text</span> 
 
</div> 
 

 
<div class="box ellipsis"> 
 
    <span class="nowrap">A really long piece of text</span> 
 
</div>