В этом видео я расскажу вам о переносах текста,
о форматировании переносов и пробелов с помощью CSS и о нескольких html-тегах,
которые могут нам помочь в этом.
Как вы помните из видео по html, все, что нужно для того,
чтобы установить перенос текста — это добавить тег <br>.
Как видно из примера, ничего сложного в этом нет,
текст переносится именно там, где мы его указали.
Но нам более интересен перенос внутри слов.
Данный тип переносов интересен для нас в первую очередь тем, что, во-первых,
избавляет от лесенок при выравнивании по левому краю,
что очень ярко видно в данном примере,
а также сводит по минимуму разброс ширины пробелов при выравнивании по всей ширине.
От этого текст выглядит намного более аккуратнее, не имеет очень больших
пробелов между букв и слов, а также лесенок, о которых я уже говорил ранее.
А вот так выглядит текст с автопереносами.
Как вы видите, справа нет никаких лесенок,
а также слово «домах» разделилось по слогам, и вставился дефис.
От этого текст стал выглядеть более аккуратно и красиво.
Как же этого добиться?
Ну, все очень просто.
Указываем lang для параграфа и устанавливаем автопереносы с помощью
свойства hyphens.
Получается примерно такое: параграф с атрибутом lang, равным ru,
для того чтобы браузер понимал, как переносить по слогам,
а также для параграфа устанавливаем свойство hyphens со значением auto.
Вуаля, это все, что нужно сделать!
Но на самом деле — нет.
Далеко не каждый браузер поддерживает эту особенность и возможность.
Поэтому придется отдуваться как-то по другому,
а именно с помощью мягких переносов.
Такие переносы помогают браузеру понять, где переносить слово по слогам.
Указываются они с помощью символа мнемоники ­ и работают при hyphens:
manual.
Но так, как manual — это значение по умолчанию,
можно не обращать внимание на данное уточнение.
В итоге мы получаем примерно такую верстку: если у нас был параграф просто с
текстом, то нужно сделать параграф с текстом и с кучей символов мнемоники ­,
для того чтобы это переносилось красиво, так, как было в примере ранее.
Но, слава Богу, для этого существуют сервисы, которые сделают это за вас.
Один из таких сервисов будет указан в дополнительных материалах к данному видео.
В некоторых случаях нам могут потребоваться переносы без дефиса.
Для того чтобы их установить, используется тег<wbr>.
О нем вы уже слышали из видео по html.
Так вот, если мы вместо наших символов мнемоники ­ просто расставим <wbr>,
мы получим тот же самый результат,
с одним исключением: при переносе слов никакой дефис подставляться не будет.
Также существуют ситуации, когда слово разрывать можно в любом месте.
Для этого используется свойство word-break со значением break-all.
Также есть значение keep-all, но работает оно только для китайского,
корейского и японского языков, что немножко не наша история.
Возьмем пример: у нас есть два параграфа.
У первого мы устанавливаем свойство word-break: normal — значение по
умолчанию, а для второго — word-break: break-all.
Что же получится в итоге?
Вот наш первый параграф, вот наш второй параграф.
Сейчас мы будем анимировать ширину у первого и у второго параграфов и
заметим разницу.
В первом параграфе все переносится по словам,
в то время как во втором — по буквам.
Это особенно видно как раз именно при анимации.
Но существуют и обратные ситуации,
когда слово или словосочетание не нужно разрывать ни при каких обстоятельствах.
Простейший пример: когда я готовил данные презентации, мне нужно было указывать
свойство, двоеточие и значение в тексте, и чтобы они не разрывались,
чтобы не получалось вот такого эффекта, который вы видите сейчас,
так как это некрасиво, нелогично и читается довольно сложно.
Все, что нужно сделать, это запретить перенос.
Для тега <mark> мы устанавливаем свойство white-space: nowrap и получаем
вот такой результат.
Это красиво и читается намного проще.
Я это использовал на протяжении всех своих презентаций.
Но нужно знать, что white-space умеет еще много чего.
Возьмем такую разметку.
Ее форматирование не случайно, она поможет нам в примерах в дальнейшем,
но если сейчас данную разметку вывести в браузере,
то выглядеть это будет примерно так, так как браузер просто превращает
последовательность пробелов в один пробел и переносы также в один пробел.
Если мы установим значение white-space со значением pre (preformatted),
что является аналогом тега pre, то мы можем увидеть такой результат: все наше
форматирование сохранилось, ничто нигде не перенеслось,
абсолютно каждый пробел на своем месте, абсолютно каждый перенос на своем месте.
Если мы установим значение white-space: pre-line, то получим такой
результат: все переносы сохранены, а все пробелы схлопнулись до одного.
Если установить значение свойства white-space: pre-wrap,
то мы получаем немного другой результат: сохранены переносы, сохранены пробелы,
но если текст не вмещается в одну строку,
то он переносится и начинается с самого начала, с самого левого края.
Об этом нужно помнить.
Ну и последний, самый простой пример — это white-space со значением nowrap.
Как вы уже поняли, никаких переносов и множественных пробелов оно не сохранит.
Выстроит всё в один ряд и не перенесет на новую строку,
даже если текст вылезает за края своего родителя.
В принципе, это все, что я хотел вам рассказать о переносах,
о форматировании пробелов и переносов с помощью CSS,
а также мы вспомнили о тегах wbr и br и символе мнемоники ­.
В следующем видео я расскажу вам о паре псевдоэлементов для работы с текстом.
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
