Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание классических типографских эффектов: перенос слов

13 февраля 2018 | Опубликовано в css | Нет комментариев »

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

 

 


Есть три способа создания переноса слов на веб-странице:

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

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

 Применение свойств CSS переноса и разрыва слов.

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

p {
        word-break: break-word;
        -ms-word-break: break-all;
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
}

Значения для свойства переноса слов требуются для браузеров Internet Explorer версии 8 и 9 и для браузеров Chrome и Opera. К сожалению, они до сих пор не поддерживают свойство CSS переноса слов, но в них слова будут разбиты на строки.

В результате получим следующее:


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

Чтобы добиться правильного переноса слов, нужно задать язык содержимому веб-страницы, что позволит браузеру обратиться к словарю за соответствующими расположениями разрыва слов. Проще всего добавить язык в открывающий тег <html>:

<html lang=en>

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:




Оставить ответ


− восемь = 1

Вставить изображение