Как вставить текст столбиком?
Возможно вам покажется очень простым этот вопрос , но найти на него ответ не удалось. Пытаюсь вставить текст в файл (стих в столбик), а он все переводит в строчный вариант. Очень не удобно , подскажите как исправить.
- Вопрос задан более трёх лет назад
- 23534 просмотра
Средний 2 комментария
- Вконтакте
Первая ссылка в гугле
- Вконтакте
- Вконтакте
ну а как Вы хотели, это разметка html, работает она так и начнет новую строку только если ее об этом попросить ну или если упрется в границу блока, для красоты стиха используйте
Колонки — Основы верстки контента
Создание колонок с текстом, до прихода стандарта CSS3, было достаточно сложным делом. Приходилось использовать различные свойства позиционирования и следить за тем, чтобы колонки не «развалились» в процессе добавления информации.
Посмотрите на пример выше. При всей визуальной легкости, создание такого макета вызывало трудности. Чаще всего проблема возникала в переносе текста в колонках. Для решения этой задачи использовали несколько блоков со строго отведенной информацией. Ни о каких автоматических переносах или изменении статьи не могло идти и речи.
Сейчас же эта задача решается всего двумя(!) свойствами. Эти и некоторые другие свойства мы рассмотрим в данном уроке.
Создание колонок
Для создания колонок в CSS существует свойство column-count . Оно полностью соответствует своему названию. Достаточно указать количество колонок и браузер все сделает за вас.
Важно: информация внутри колонок обрабатывается «как есть». Это значит, что все отступы сохраняются. В случае с параграфами стоит сбрасывать верхний отступ. Это позволит держать первый параграф на одной линии с другими колонками.
По умолчанию колонки делятся равномерно внутри контейнера и суммарно они займут все доступное пространство. Повлиять на это поведение можно свойством column-width — с его помощью задается оптимальная ширина колонок. Слово «оптимальная» является главным. В отличие от свойства width , здесь не устанавливается четкая ширина, и, если места в контейнере хватает, то колонки будут растягиваться на всю доступную ширину.
Зачем нужно такое поведение? Представьте, что у нас есть длинный текст в две колонки. Например, как в первом изображении в этом уроке. Без указания оптимальной ширины браузер будет выстраивать две колонки при любой ширине устройства. Если эта ширина будет 300 пикселей, то колонки поделятся по 150 пикселей. Ужасная картина.
Чтобы не допустить такого, можно выставить оптимальную ширину. Если браузер не сможет выдать такую ширину колонке, то контент будет выстроен в одну колонку. Вот уже и адаптивность. А ведь это только первые уроки 🙂
Эту запись можно сократить. В CSS используется свойство columns для сокращения свойств column-count и column-width . Последний пример можно записать так:
Первым значением записывается ширина колонки, а вторым их количество
Перейдите на сайт CodePen и попробуйте сузить окно браузера. В определенный момент колонки уйдут, и весь текст будет выстроен в одну колонку.
Отступы между колонками
В примерах выше вы могли заметить, что браузеры автоматически проставляют отступы между колонками. Чаще всего не стоит доверять браузеру. Одно из правил верстки и программирования: явное лучше неявного. По умолчанию расстояние между колонками равно 1em . Единица измерения em отсчитывается от размера шрифта. Если размер шрифта равен 16 пикселям, то и 1em равен 16 пикселям.
Задать отступы между колонками можно с помощью свойства column-gap . Кстати, это свойство вы встретите еще много раз. Оно достаточно универсально.
Вы можете использовать различные единицы измерения внутри свойства column-gap . Для примера возьмем значения в пикселях. В будущих уроках вы познакомитесь и с другими единицами измерения.
Попробуйте изменить значение свойства column-gap и посмотрите, как это повлияет на колонки.
Границы между колонками
Модуль CSS Multi-column Layout позволяет задавать визуальную границу между колонками. Если вы знакомы со свойством border , которое устанавливает границы у блоков, то поведение вам будет знакомо. Раньше создание границ между колонками необходимо было реализовывать самостоятельно, что тоже не радовало верстальщиков.
Для создания границы используется свойство column-rule , которое является краткой записью следующих свойств:
- column-rule-width — ширина границы.
- column-rule-style — тип границы. Значения совпадают со значениями свойства border .
- column-rule-color — цвет границы.
Вы можете указывать как три отдельных свойства, так и краткую запись.
Добавление контента в несколько колонок
Если представить себе газету, то там не всегда текст идет строго по колонкам. Частая ситуация — заголовок, который накладывается на все колонки, как бы разделяя их по горизонтали.
Для разделения колонок используется свойство column-span . Оно принимает всего два значения:
- none — значение по-умолчанию. Текст находится просто внутри колонок.
- all — текст «выходит из колонки» и разделяет их.
Перенос колонок
В примерах можно заметить, что все элементы внутри колонок переносятся автоматически. Это неплохое решение для текста, но если существуют небольшие блоки, и нам явно не нужно, чтобы информация внутри них переносилась, то без помощи сторонних свойств не обойтись. Как же контролировать перенос контента внутри колонок? Для этого существует несколько правил, о которых поговорим в этом разделе.
- break-before
- break-after
- break-inside
По названию уже можно понять, что речь идет о переносе до/после и внутри. Все три свойства принимают огромное количество значений, так как рассчитаны не только для колонок, но и для вывода на печать.
При работе с CSS Multi-column Layout нас больше всего интересует значение avoid , которое запрещает перенос.
Взгляните на элемент figure. Он состоит из изображения и подписи к нему. Для наглядности обведем его границей и увидим, что изображение находится в одной колонке, а подпись уже в другой. Это плохой вариант верстки текста. Без границы совершенно непонятно что текст — лишь подпись изображения, а не самостоятельный текст.
Этот перенос происходит внутри элемента figure. Для запрета такого переноса можно воспользоваться свойством break-inside и запретить перенос внутри данного элемента.
Самостоятельная работа
Найдите любую газетную статью. Используя CSS Multi-column Layout воссоздайте журнальную верстку.
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Об обучении на Хекслете
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Урок «Как эффективно учиться на Хекслете»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
How to display an unordered list in two columns?
With the following HTML, what is the easiest method to display the list as two columns?
The solution needs to work with Internet Explorer.
19 Answers 19
Modern Browsers
leverage the css3 columns module to support what you are looking for.
CSS:
Legacy Browsers
Unfortunately for IE support you will need a code solution that involves JavaScript and dom manipulation. This means that anytime the contents of the list changes you will need to perform the operation for reordering the list into columns and reprinting. The solution below uses jQuery for brevity.
HTML:
JavaScript:
CSS:
EDIT:
As pointed out below this will order the columns as follows:
while the OP asked for a variant matching the following:
To accomplish the variant you simply change the code to the following:
I was looking at @jaider’s solution which worked but I’m offering a slightly different approach that I think is more easy to work with and which I’ve seen to be good across browsers.
By default un-ordered list display the bullet position outside but then in some browsers it would cause some display problems based on the browser’s way of laying out your website.
To get it to display in the format:
etc. use the following:
This should solve all your problems with displaying columns. All the best and thanks @jaider as your response helped to guide me to discover this.