@Spaceoddity

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

Сразу предупрежду - вопрос сложный. Первоначальное гугление ничего не дало, хотя казалось бы, задача должна встречаться.
Дело даже не в многоточии (text-overflow:ellipsis и его эмуляциях). А просто в корректной обрезке.
Блок фиксированной высоты. Но в нём два типа текста с разным интерлиньяжем (line-height), поэтому просто подогнать размеры под кратный line-height - не вариант.
Считать символы и обрезать (что на бэкенде, что на фронте) - тоже не вариант. Шрифт не моноширинный, непонятно, сколько в итоге получится строк с одним интерлиньяжем и сколько с другим. Поэтому и "-webkit-line-clamp" не подходит.
  • Вопрос задан
  • 126 просмотров
Пригласить эксперта
Ответы на вопрос 2
@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;
}
Ответ написан
@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
    });
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
27 окт. 2020, в 04:55
1000 руб./за проект
27 окт. 2020, в 03:49
2000 руб./за проект
27 окт. 2020, в 03:32
800 руб./в час