Как добавить с помощью свойств 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.

Комментарии