Как можно сократить все внутри user-notification класса?

Question

[Lavrov95]

<a data-id="4" data-href="/en/products/apartments/kuhonnaa-mojka-florentina-bombej-1" class="dropdown-item user-notification cursor-pointer user-notification-viewed">
    <span>
        <b>Real estate</b> <span> added a new product</span>
        <p class="p-0 m-0">
            <b>Some apartment title</b>
        </p>
    </span>
</a>

Результат должен быть такой, в зависимости от длины класса user-notification

Real estate added a new product
Some apartmen...

Пример из facebook

Comments

[Евгений Щербаков]

Что именно Вы хотите сократить?

[Sand]

Что сократить? Может css покажите?

[Lavrov95]

Sand, css не написан, сократить нужна все что есть в классе user-notification, как один текст

[Lavrov95]

Евгений Щербаков, сократить нужна все что есть в классе user-notification, как один текст

[Евгений Щербаков]

Sand, походу мы с тобой чего-то не понимаем :(

[Евгений Щербаков]

Lavrov95, вот у Вас класс

class="dropdown-item user-notification cursor-pointer user-notification-viewed">

Вы хотите это сократить в такое?

class="user-notification">

[Lavrov95]

Евгений Щербаков, Текст внутри класса. Представь что нет тегов внутри user-notification там толька текст

Real estate added a new product Some apartment title

Тогда css был бы такой

.user-notification {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

[Sand]

Евгений Щербаков, тут нужен ооооочень магический шар