Skrócenie zbyt długiego tekstu za pomocą CSS

Aby skrócić element do pewnej wielkości musi być on elementem blokowym, można nadać mu oczywiście właściwość block – display:block lub display: inline-block;
Powiedzmy że mamy div o wymiarach 200px szerokości, w którym znajduje się zbyt długi tekst który nie chcemy aby się załamywał do następnej linii a jedynie ucinał i na końcu tekstu pojawiły się trzy kropki „…”

.cut-string {
   width: 200px;
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}
<div class="cut-string">Jakiś sobie tekst który jest za dług</div>

Po użyciu tego stylu otrzymujemy „Jakiś sobie tekst który jest z…”

Dodaj komentarz

avatar
  Subscribe  
Powiadom o