Ograniczenie co do konkretnej ilości znaków.

Witam,
Mam spana (może być w nim jeszcze p jeśli to coś pomoże), który przyjmuje argument do wyświetlania. Ten argument z góry ma narzuconą maksymalną ilość znaków (np.10).
Po wykonaniu pewnej akcji zmienia się klasa stylu spana - np. tekst zostaje pogrubiony. Chciałbym zrobić coś takiego, że po wykonaniu zmiany klasy styli (np. tym pogrubieniu), maksymalna ilość znaków tego tekstu w spanie zmieni się na mniejszą (np. do 5) i w tym momencie ilość znaków, która była nadmiarowa nie zostanie wyświetlona/będzie ukryta. Macie może jakieś propozycje jak to zrobić? Textarea oraz input z maxlenght odpadają. Może jakieś opcje w css?

<span>{argument}</span>
<span><p>{argument}</span>

Czy musi byc to CSS, czy można się wspomóc JS?

Czcionka nieproporcjonalna,
policzyć sobie szerokość jednego znaku dla danego rozmiaru oraz wymaganej liczby znaków,
white-space: nowrap;
overflow: hidden;
max-width: ile-tam-sobie-wyliczyłeśpx;

Jeszcze jedno ważne pytanie - czy chcesz ten tekst skrócić, czy ma on być pierwotnej długości, ale jedynie planujesz obciąć jego wyświetlenie na ekranie? Bo to są dwa różne tematy.