Столбцы газеты HTML

Если Вы решаете сделать это, это уже возможно в Mozilla и WebKit (и принц ) только с CSS:

selector {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

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

Два примечания:

• , Какие работы для печатного носителя не хороши для носителя дисплея. Необходимость прокрутить, чтобы продолжить читать не походит на хорошую идею для меня. В конце концов, Веб-страницы не ограничены в длине...
• Вы не можете сделать этого с CSS2. Я думаю, что CSS3 имеет поддержку того (не уверенный), я сомневаюсь, что это поддерживается большинством браузеров.

, Таким образом, я предполагаю, JS является Вашим лучшим выбором, но он не будет работать на пользователей с отключенным JS, конечно.

Я соглашаюсь с PhiLho. Если Вы все еще хотите попробовать его, код js, делящий Ваше содержание на два столбца, довольно прост, если столбцы зафиксировали ширины. Хитрый бит решает, где разделить содержание. Вы, вероятно, не хотите разделять посреди слова и т.д.

Вы могли попробовать следующим сценарием: Добавьте два столбца в свою страницу. Поместите свой текст в первый столбец (это позволяет не js браузерам все еще отображать Ваше содержание). Получите текст с js (например, от onload события). Найдите следующий индекс "." (или если у Вас есть абзацы" </p>"), запускающийся с середины. Используйте тот индекс, чтобы разделить текст и отложить первую часть в первом столбце и так далее...

IHT имеет хорошую реализацию из 3 colums форматов. Это однако, кажется, вычисленная сторона сервера, я предполагаю путем подсчета слов.

Вот является простое (не дружественный CSS) функцией JavaScript, которая сделает это:

function Newspaperize(elem)
{
    var halflength = elem.innerText.length / 2; 
    var col1 = elem.innerText.substring(0, halflength);
    var col2 = elem.innerText.substring(halflength);

    elem.innerHTML = '<TABLE WIDTH=100%><TR>' + 
        '<TD WIDTH=50% VALIGN=TOP>' + col1 + '</TD>' +
        '<TD VALIGN=TOP>' + col2 + '</TD>' +
        '</TR></TABLE>';
}

Помещенный Ваш текст в регулярный элемент где-нибудь и вызов Newspaperize(yourelement), когда страница загружается.

Примечание: эта функция просто разделяет текст в половине. Для реальной работы правильно Вы хотели бы найти пространство или дефис ближайшими средняя точка и разделить текст там.

Поскольку другие сказали - не что-то, что это возможно с ванильным CSS/XHTML (по крайней мере - только когда мы получаем широко распространенный CSS3 :-)

, Однако носящий мою пользовательскую шляпу опыта, я интересовался бы Вашим вариантом использования для желания этого на веб-странице (предполагающий, что это - нормальная веб-страница, для которой Вы нацелены). В отличие от печати, разделяющей блок текста, более чем два столбца могут мешать читать. Если это длиннее, чем экран затем, пользователь должен сделать большую прокрутку вверх и вниз для сканирования/читавшего всего.

Так - даже если можно сделать это с некоторым JS, взламывающим - могло бы быть лучше придумать альтернативный дизайн, для которого не нужен он.

Мне удалось сделать что-то вроде этого, но снова, не в CSS, я использовал PHP, чтобы считать слова и разделить текст. К сожалению, подсчет слов является довольно плохим способом идти о выполнении его, так как некоторые слова дольше, чем другие и столбцы не совпадают. Мой дизайн был вдохновлен веб-сайтом IHT. Не очень трудно реализовать в PHP.

Итак, я искал ответ на этот вопрос, к сожалению, сначала я не нашел его, а теперь, спустя 3 часа, нашел.

Я нашел библиотеку JavaScript, которая использует атрибуты css3 (если я правильно понял, только попытался заставить ее работать, и она сработала, я буду читать в js позже)

Библиотека найдена здесь: http: / /www.csscripting.com/wiki/index.php?title=CSS3_Multi_Column

Единственный недостаток состоит в том, что текст, который вы хотите сделать многоколоночным, ДОЛЖЕН находиться между двумя тегами (я предпочитаю использовать тег

, так как он также поддерживает несколько тегов

.)

тестировал его в ff 3.6, то есть 8, Opera 10.51 и chrome 4.1. Я не в состоянии тестировать старые браузеры, поэтому рекомендую, чтобы кто-нибудь сделал это в ближайшее время; P

ура!