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..."
Polecam również lekką bibliotekę do skracania tekstów w wielu liniach, ale i nie tylko. Za jej pomocą można skracać również tabele, elementy list li itd. zerknij może Ci się przyda show-more