Obcinaj długie linki w Bootstrapie

Question

Projektuję stronę za pomocą Bootstrap 3.1, w której jeśli długość łącza HTML jest zbyt długa, przepełnia się i tworzy poziomy przewijak w wersji mobilnej. Czy istnieje sposób na skrócenie i zastąpienie go elipsami?

Przykład:

Co potrzebne jest, że zamiast rozszerzania się, że powinien dostać obcięta przed granicą. KAŻDY pomysł, jak to zrobić?

Answer 1

Musisz upewnić się, że kontener ma overflow: hidden, aby tekst nie przepływał poza granicę i nadać mu text-overflow: ellipsis, aby nadać linkowi elipsę.

.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>