Как добавить с помощью свойств CSS строку
Опубликованно 11.12.2018 00:14
В макет веб-мастеров, периодически возникает вопрос: как будет осуществляться перенос текста? В большинстве случаев браузер самостоятельно справиться с этой задачей. Но иногда этот процесс необходимо взять под контроль, в частности, составления длинных слов и фраз, что если не правильно миграции теряют смысл.
Свойство 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">L<br><br>g<br><br>т<br><br>n</p> </section> </body> </html>
Получился громоздкий и уродливый код, который любой разработчик, случается культурный шок. И как это сделать, если вы хотите, чтобы в версии рабочего стола логотип находился в горизонтальном положении, в то время как ширина экрана меньше, чем 550 пикселей по вертикали? Так, чтобы настроить внешний вид элементов, всегда используйте таблицы стилей css. Тем более с помощью инструментов 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, можно настроить, чтобы он был сделан с учетом пробелов или нажав клавишу "Enter". 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">После каждый слова я нажимаю клавишу "Input". </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 позволяет обрезать контент, когда контейнер заполнен. Принимает два значения: клип — просто обрезает текст; многоточие — добавляет многоточие.
#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis;/*Добавляем многоточие*/ white-space: nowrap; /* Запретить передачу строк */ overflow: hidden;/*Скрываем все то, что выходит за пределы контейнера*/ }
Для того, чтобы свойство работало, элемент, кроме того, необходимо назначить запрет разрыва строк и overflow со значением hidden. Автор: Искать Ася 19 Сентября, 2018
Категория: обо всём
