В этом видео я расскажу вам о переносах текста, о форматировании переносов и пробелов с помощью 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 и символе мнемоники ­. В следующем видео я расскажу вам о паре псевдоэлементов для работы с текстом.
