Как установить текст по ширине с помощью CSS

Одно из свойств типографики веб-сайта, которое вы можете настроить во время разработки, - это то, как выравнивается текст сайта. По умолчанию текст веб-сайта выровнен по левому краю, и именно так многие сайты оставляют свой текст. Единственные другие варианты - правильно обоснованные, что бывает редко, или полностью оправданные.

Выровненный текст представляет собой блок текста, который выравнивается по левой и правой сторонам, а не только по одной из этих сторон (что и делают «левое» и «правое» выравнивание). Эффект двойного выравнивания достигается путем настройки пробелов между словами и буквами в каждой строке текста, чтобы гарантировать, что каждая строка имеет одинаковую длину. Этот эффект называется полное обоснование. Выровняйте текст в CSS по ширине с помощью выравнивание текста имущество.

Как работает оправдание?

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

instagram viewer

Каждый веб-браузер имеет собственный алгоритм для использования лишних пробелов в строке. Браузеры смотрят на длину слова, расстановку переносов и другие факторы, чтобы определить, где разместить пробелы. В результате выровненный по ширине текст может не выглядеть одинаково в разных браузерах. Однако будьте уверены, что основная поддержка браузеров хороша для выравнивания текста с помощью CSS.

Как выровнять текст

Для выравнивания текста с помощью CSS требуется выравнивание части текста. Как правило, вы будете использовать абзацы текста, потому что большие блоки текстового контекста, занимающие несколько строк, будут помечены тегами абзацев.

После того, как у вас есть блок текста, который нужно выровнять, просто нужно установить стиль, который будет выровнен с помощью свойства CSS text-align style. Примените это правило CSS к соответствующему селектору, чтобы блок текста отображался должным образом.

Когда выравнивать текст по ширине

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

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

Помимо проблем с удобочитаемостью, пустые места иногда выстраиваются друг с другом, образуя «реки» белого пространства в середине текста. Эти большие пробелы в пустом пространстве действительно могут сделать дисплей неудобным. Кроме того, на очень коротких строках выравнивание может привести к появлению строк, содержащих одно слово с дополнительными пробелами между самими буквами.

Итак, когда следует использовать выравнивание текста? Лучшее время для выравнивания текста - это когда строки длинные, а размер шрифта небольшой - что трудно обеспечить на адаптивных веб-сайтах, где длина строк изменяется в зависимости от размеров экрана. Не существует точного и точного числа для длины строки или размера текста; вы должны руководствоваться здравым смыслом.

После того, как вы применили стиль выравнивания текста для выравнивания текста, проверьте его, чтобы убедиться, что в тексте нет рек пробелов, и проверьте его при различных размерах. Самый простой тест не требует ничего сложнее, чем ваши собственные прищуренные глаза. Реки выделяются белыми пятнами на сером блоке текста. Если вы видите реки, вам следует изменить размер текста или ширину текстового блока, чтобы переформатировать текст.

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