Text Overflow CSS

text-overflow

Jeśli tekst jest ucinany tak jak w przypadku wartości overflow: hidden nie wiemy czy tekst po prostu się skończył, czy ktoś go nie dopisał, czy może gdzieś jest jego kontynuacja. Żeby rozjaśnić użytkownikowi tą sytuację możemy posłużyć się własnością text-overflow (ang. nadmiar tekstu). Własność ta mówi co ma się stać z tekstem po przekroczeniu szerokości elementu, czy ma zostać przycięty (ang. clip) czy może mają być wstawione znaki świadczące o kontynuacji tego tekstu np. wielokropek … (ang. ellipsis)

text-overflow: clip; /* domyślna */
text-overflow: ellipsis;
p {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 300px;
 border: 1px solid #BEBEBE;
}
<p>Tekst, który zostanie przycięty wielokropkiem.</p>

Tekst, który zostanie przycięty wielokropkiem.

Jeśli chcecie doczytać o tej własności to polecam text-overflow

Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.