How to cut multiline text on a page?

Question

css

I'll warn you right off the bat - it's a tricky question. The initial googling did not give anything, although it would seem that the task should occur.
It's not even about the ellipsis (text-overflow:ellipsis and its emulations). But just in the correct cut.
Fixed height block. But it has two types of text with different leading (line-height), so just adjusting the dimensions to a multiple of line-height is not an option.
Counting characters and trimming (both on the backend and on the front) is also not an option. The font is not monospaced, it is not clear how many lines will end up with one leading and how many with another. Therefore, "-webkit-line-clamp" is not suitable either.

Answer 1

in our project, we use a mixin (less) for these purposes, where we pass the number of lines, if it doesn’t fit, the last one will be cut off with an ellipsis .. actually, everything is clear here, I hope I answered the question
.longTextWithTransfers(@countLine: 2, @fontSize: 16px, @lineHeight: 20px, @fw: 400) {
.text-style(@fontSize, @lineHeight, @fw);
max-height: @lineHeight * @countLine + 4px;
-webkit-line-clamp: @countLine;
-webkit-box-orient: vertical;
display:block;
display: -webkit-box;
word-break: break-word;
hyphens: auto;
overflow: hidden;
text-overflow: ellipsis;
}

Answer 2

if specifically trim "How to trim multiline text"

(function($) {
    'use strict';

    $.fn.succinct = function(options) {

        var settings = $.extend({
                size: 240,
                omission: '...',
                ignore: true
            }, options);

        return this.each(function() {

            var textDefault,
                textTruncated,
                elements = $(this),
                regex    = /[!-\/:[email protected]\[-`{-~]$/,
                init     = function() {
                    elements.each(function() {
                        textDefault = $(this).html();

                        if (textDefault.length > settings.size) {
                            textTruncated = $.trim(textDefault)
                                            .substring(0, settings.size)
                                            .split(' ')
                                            .slice(0, -1)
                                            .join(' ');

                            if (settings.ignore) {
                                textTruncated = textTruncated.replace(regex, '');
                            }

                            $(this).html(textTruncated + settings.omission);
                        }
                    });
                };
            init();
        });
    };
})(jQuery);

$(function() {
    "use strict";
    $('.truncate299').succinct({
        size: 299,
        omission: '...',
        ignore: true
    });

    $('.truncate200').succinct({
        size: 200,
        omission: '...',
        ignore: true
    });

    $('.truncate100').succinct({
        size: 100,
        omission: '...',
        ignore: true
    });

    $('.truncate80').succinct({
        size: 80,
        omission: '...',
        ignore: true
    });

    $('.truncate25').succinct({
        size: 25,
        omission: '!',
        ignore: true
    });

    $('.truncate20').succinct({
        size: 20,
        omission: '',
        ignore: true
    });
});