Как добавить с помощью свойств CSS перенос строки
При верстке у веб-мастеров периодически возникает вопрос: как будет осуществляться перенос текста? В большинстве случаев браузер самостоятельно справляется с этой задачей. Но иногда этот процесс приходится брать под контроль, особенно оформляя длинные слова и фразы, которые при неправильном переносе теряют смысл.
Свойство word-wrap
В HTML для разделения строк существует специальный тег <br>. Но его слишком частое использование считается среди разработчиков дурным тоном и зачастую свидетельствует о непрофессионализме. Как доказательство, представьте, что у вас есть логотип и вы хотите, чтобы каждая буква начиналась с новой строки:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Проверка перенова слов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section id="logo-wrapper">
<p class="logo">Л<br>о<br>г<br>о<br>т<br>и<br>п</p>
</section>
</body>
</html>Получился громоздкий и уродливый код, от которого у любого разработчика случится культурный шок. И как поступить, если вы захотите, чтобы в десктопной версии логотип располагался горизонтально, а при ширине экрана менее 550 пикселей вертикально? Поэтому для настройки внешнего вида элементов всегда используйте каскадные таблицы стилей. Тем более с помощью инструментов CSS перенос строки осуществляется более элегантным способом. При этом не возникает избыточной разметки, которая только уменьшает скорость загрузки страниц.
Первое свойство, к которому стоит обратиться для обработки текста, — это word-wrap. Принимает три значения: normal, break-all и keep-all. Вам для работы понадобится запомнить только break-all. Normal стоит по умолчанию, и его нет смысла указывать. Keep-all означает в документе CSS запрет переноса строки. Разработано специально для китайских, японских и корейских иероглифов. Поэтому, если вы не собираетесь вести блог на каком-то из этих языков, свойство вам не пригодится. А также оно не поддерживается браузером Safari и мобильными телефонами на базе iOS.
Чтобы логотипу из предыдущего примера назначить с помощью CSS перенос на новую строку каждой буквы, нужно прописать следующий код:
p{
font: bold 30px Helvetica, sans-serif;
width: 25px;
word-wrap: break-all;
}Ширина и размер шрифта подбирается таким образом, чтобы места хватало только для одной буквы. Word-wrap со значением break-all сообщает браузеру, что слово нужно каждый раз переносить на новую строку. Незаменимым это свойство назвать нельзя. Но оно пригодится при оформлении небольших блоков с текстом, например полей для ввода комментариев.
Свойство white-space
Распространенная ошибка начинающих веб-разработчиков — пытаться редактировать текст пробелами или нажатиями клавиши Enter, а потом удивляться, почему их усилия не видны на странице. Сколько бы вы раз ни нажали "Ввод", браузер это проигнорирует. Но есть способ заставить его отображать текст так, как нужно вам, и принимая во внимание все интервалы.
В документе CSS перенос строки, назначенный с помощью свойства white-space, можно настроить так, чтобы он осуществлялся с учетом пробелов или нажатия клавиши "Ввод". White-space со значением pre-line заставит браузер видеть в тексте Enter.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Проверка перенова слов</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body{
width: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
}
#wrapper{
/*Элементу-контейнеру необходимо обязательно задать ширину!*/
width: 60%;
background: linear-gradient(to bottom, rgba(0,0,0,.1),rgba(0,0,0,.8));
}
#wrapper p{
color: #FFF;
padding: 10px;
font: bold 16px Helvetica, sans-serif;
white-space: pre-line;
}
</style>
</head>
<body>
<section id="wrapper">
<p class="text-to-wrap">После
каждого
слова
я
нажимаю
клавишу
"Ввода".
</p>
</section>
</body>
</html>Если поменять pre-line на pre-wrap в коде CSS, перенос строки произойдет с учетом пробелов. И наоборот, запретить любой перенос, присвоив тексту свойство white-space со значением nowrap:
#wrapper p{
color: #FFF;
padding: 10px;
font: bold 16px Helvetica, sans-serif;
white-space: nowrap;
}Text-overflow
Еще один полезный инструмент для работы с текстом — это text-overflow. Помимо переноса строки, CSS-свойство позволяет обрезать контент, когда контейнер переполнен. Принимает два значения:
- clip — просто обрезает текст;
- ellipsis — добавляет многоточие.
#wrapper p{
color: #FFF;
padding: 10px;
font: bold 16px Helvetica, sans-serif;
text-overflow: ellipsis;/*Добавляем многоточие*/
white-space: nowrap; /* Запрещаем перенос строк */
overflow: hidden;/*Прячем все что выходит за рамки контейнера*/
}Чтобы свойство работало, элементу также необходимо назначить запрет на перенос строки и overflow со значением hidden.