JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tip">Цифровой игровой гигант Valve объявил, что через 18 месяцев после добавления возможности покупать игры в Steam с Bitcoin он больше не будет принимать BTC в качестве способа оплаты. Первоначальное решение принять криптовалютность никогда не рассматривалось как деловое событие для принятия Биткойна в качестве законного тендера, но доминирование Steam в распределении цифровых игр для ПК и перекрытие между энтузиастами компьютерных игр и пользователями BTC сделало его громкой победой в 2016 году. (Чтобы быть ясным, мы не говорим, что существует высокая степень совпадения между игроками и энтузиастами криптовалюты, поскольку мы утверждаем, что BTC, вероятно, более популярен у геймеров, чем с, скажем, пригородной Атлантой отставники. <SPAN style="color:#ff0000;font-size:20px;">ДОХЕРА ТЕКСТА ЗАКОНЧИЛОСЬ </SPAN></div>

JavaScript

! function(e) {
    e.fn.truncate = function(t) {
        var n = {
                length: 30,
                minTrail: 5,
                moreText: "читать",
                lessText: "скрыть",
                ellipsisText: " ..."
            },
            t = e.extend(n, t);
        return this.each(function() {
            obj = e(this);
            var n = obj.html();
            if (n.length > t.length + t.minTrail && -1 != (s = n.indexOf(" ", t.length))) {
                var s = n.indexOf(" ", t.length),
                    i = n.substring(0, s),
                    l = n.substring(s, n.length - 1);
                obj.html(i + '<span class="truncate_ellipsis">' + t.ellipsisText + '</span><span  class="truncate_more">' + l + "</span>"), obj.find(".truncate_more").css("display", "none"), obj.append('<span class="clearboth"><a href="#" class="truncate_more_link">' + t.moreText + "</a></span>");
                var r = e(".truncate_more_link", obj),
                    a = e(".truncate_more", obj),
                    o = e(".truncate_ellipsis", obj);
                r.click(function() {
                    return r.text() == t.moreText ? (a.show("normal"), r.text(t.lessText), o.css("display", "none")) : (a.hide("normal"), r.text(t.moreText), o.css("display", "inline")), !1
                })
            }
        })
    }
}(jQuery), $().ready(function() {
    $(".tip").truncate({
        length: 30,
        minTrail: 5,
        moreText: "читать",
        lessText: "скрыть",
        ellipsisText: " ..."
    })
});