Как разделить текст на столбцы, если я получаю текст динамически для базы данных, используя Javascript и CSS?

Question

Я думаю, что скрипт заставляет работать определенное количество символов в каждом контейнере. Вы знаете какой-нибудь сценарий? Это адаптивный дизайн, я могу использовать несколько CSS-файлов, но мне нужен только один HTML-файл:

проблема в тексте, который я получу динамически, поэтому я понятия не имею, сколько символов я получу. В размере рабочего стола абзацы расположены один над другим. В размере Ipad абзацы расположены в два столбца, некоторые справа и некоторые слева.

Answer 1

Вы можете использовать CSS3 columns для решения этой задачи только с помощью CSS, хотя это не поддерживается в IE8 и ниже;

div {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 560px;
}

В качестве запасного варианта для IE вы можете использовать условные комментарии и что-то вроде jQuery Masonry или Columnizer, как было предложено другими авторами.

Демо , которое изящно ухудшается в IE.

Answer 2

Вы думаете, что-то вроде этого?

var yourText = $('selector');
$(yourText).each(function() {
    if ($(this).text().length >= 200) {
        $(this).text($(this).text().substring(0, 200)0);
    }
});

Он получит первые 200 букв ... для следующих 200 вам нужно переключить переменные с 0,200 на 200, к сожалению, 400 разделит слово и не распознает, что некоторые буквы шире других ...

Answer 3

Есть некоторые плагины jquery.Например: Колонизатор