Форматирование текста: абзац, пустые строки, выравнивание, две колонки

Автор:
Nurlan Kemelbekov

Нажатие клавиши Enter в визуальном редакторе дает разрыв строки плюс пустую строку. Если вы хотите только разрыв строки, вы нажимаете Shift-Enter. В редакторе HTML нажатие Enter дает только разрыв строки, нажатие на нее два раза дает разрыв строки плюс пустую строку.

Абзацы и пустые строки
Если вы хотите больше пробела между абзацами или  пустые строки вы не можете сделать это, нажав Enter неоднократно, потому что в веб-стандарте HTML нет несколько разрывов строк. Вам нужно форматирование текста, чтобы добавить разницу до пункта в HTML. Вы можете добавить разрыв строки выше абзаца, или ниже ее, или в обоих.; изменить число, чтобы регулировать количество дополнительного пространства:

<p style="padding-top:14px;">ТЕКСТ ЗДЕСЬ</p>
<p style="padding-bottom:14px;">ТЕКСТ ЗДЕСЬ</p>
<p style="padding-top:14px;padding-bottom:12px;">ТЕКСТ ЗДЕСЬ</p>

Чтобы добавить дополнительное пространство ниже и / или выше крупного раздела, содержащего более одного абзаца, вы можете использовать DIV и / DIV вместо р и / р.

Статьи по теме:
Как добавить прокрутку текста/изображения в WordPress

Для дополнительного пространства над и под изображением, нужно добавить это к коду изображения (опять же, настроить путем изменения цифры):

style="margin-top:12px;margin-bottom:10px;"

Пропал визуальный (WYSIWYG) редактор WordPress: Как исправить

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

Выравнивание текста

Чтобы установить выравнивание текста, вы можете выделить текст в визуальном режиме или редактор страниц и нажмите соответствующую кнопку.

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

<p style="text-align:определить;">ТЕКСТ ЗДЕСЬ</p>

Где я написал определить, вы пишете left, right, center и т.д. Обычно вам не нужно указывать выравнивание по левому краю, так как это задано по умолчанию (когда язык блога установлен на русском или любом другом языке слева-направо).

Для более одного абзаца, указываете DIV и / DIV вместо р и / р. Или используйте этот код (опять определить следует left, right, center или width):

<div align="определить">
ТЕКСТ ЗДЕСЬ
</div>

Примечание по кодированию: когда вы хотите применить несколько команд для одного и того же куска текста, вы объедините соответствующие фрагменты кода в том же «ДИВ» или «р» тегах. Например:

<div align="center" style="padding-top:14px;">
ТЕКСТ ЗДЕСЬ
</div>

Обтекание изображения текстом

Чтобы иметь обтекание текста вокруг изображения: вы установите выравнивание изображения в левый или правый.

Можно это указать, когда вы изначально добавляете изображение. Вы также можете изменить выравнивание уже вставленной картинки: в редакторе HTML, вы измените соответствующую часть кода изображения («alignnone», «AlignCenter», «AlignLeft», «AlignRight»).

В некоторых темах уже автоматически задано некоторое пространство вокруг изображений; в других темах Вы не получаете это пространства, что означает, что перенос текста вокруг изображения будет держаться слишком близко к ним. В этом случае вы должны добавить пространства сами: в визуальном редакторе, вы нажмите на картинку, нажмите кнопку редактирования, щелкните «Дополнительные параметры», установите значение в поле «Горизонтальное пространство», нажмите кнопку Обновить; в редакторе HTML, вы добавляете это внутри кода изображения (с пробелом до и пространстве после):

style="margin-right:12px;"

(Конечно margin-right является для левого края изображения; для правому края изображения вы используете margin-left, и число это просто пример — вы можете изменить его.)

Установка выравнивание изображения в левой или правой означает, что остальная часть контента будет обернуть вокруг. Итак:
а) Образ должен быть в начале абзаца, который должен обернуть его вокруг.
б) Если вы хотите получить только короткий параграф рядом с изображением, а остальной текст под изображением, вам нужно добавить это после этого пункта: такого, как этот


<div style="clear: both;"></div>

Две колонны (или более)

Самый простой способ заключается в следующем:

ЛЕВОЕ содержания здесь
ПРАВОЕ содержания здесь


<div style="float:left;width:50%;">
<div style="padding-right:10px;">
ЛЕВое содержания здесь
</div></div>

<div style="float:right;width:50%;">
<div style="padding-left:10px;">
ПРАВОе содержания здесь
</div></div>

<div style=»clear: both;»></div>

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

Тот же тип кодирования может быть использован для создания более двух столбцов: установка всех дивов, которые определяют каждый столбец float: left (с соответствующими ширине процентах) установит все бок о бок.

Чтобы изменить расстояние между словами, примените следующее:

<p style=»word-spacing: 1em;»></p>

Отступ начала нового абзаца (красная строка)

<p style=»text-indent: 1em;»></p>

Выравнивание целого абзаца по центру.

Можно прибегнуть к помощи padding-кода еще раз, в данном случае для обеих сторон текста:

<div style=»text-align:justify;padding-left:25px;padding-right:25px;»>
ТЕКСТ ЗДЕСЬ
</div>

Надеюсь, что кому-то пригодятся эти примеры.



Вам также может понравиться:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

четыре × пять =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!