Как обрезать многострочный текст на странице?

Question

[Spaceoddity]

Сразу предупрежду - вопрос сложный. Первоначальное гугление ничего не дало, хотя казалось бы, задача должна встречаться.
Дело даже не в многоточии (text-overflow:ellipsis и его эмуляциях). А просто в корректной обрезке.
Блок фиксированной высоты. Но в нём два типа текста с разным интерлиньяжем (line-height), поэтому просто подогнать размеры под кратный line-height - не вариант.
Считать символы и обрезать (что на бэкенде, что на фронте) - тоже не вариант. Шрифт не моноширинный, непонятно, сколько в итоге получится строк с одним интерлиньяжем и сколько с другим. Поэтому и "-webkit-line-clamp" не подходит.

Comments

[Ankhena]

Но в нём два типа текста с разным интерлиньяжем (line-height), поэтому просто подогнать размеры под кратный line-height - не вариант.

Почему это не вариант?
Просто считать с условием.
Для простой компоновки: если первая часть помещается, то узнаем ее высоту, получаем оставшуюся и считаем строки во второй. И наоборот.
Для сложной аналогично, только условий больше.

[Froggyweb]

не по теме но полезно
https://medium.com/@aexanderumnikov/%D1%81%D0%B5%D...

Answer 1

[alex_ok83]

у нас в проекте ипользуется для этих целей миксин (less), куда передаем количество строк, если не влезает, последняя обрежется с многоточием.. собственно тут все понятно, надеюсь ответил на вопрос
.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;
}

Comments

[xmoonlight]

Код в теги может вставите...

[alex_ok83]

xmoonlight, https://codepen.io/alex-dev-tlt/pen/zYvdvMX?editor...

Answer 2

[siarheisiarhei]

если конкретно обрезать "Как обрезать многострочный текст"

(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    = /[!-\/:-@\[-`{-~]$/,
                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
    });
});