Как добавить с помощью CSS-свойства строки
Опубликованно 11.01.2019 15:00
При верстке у вебмастеров регулярно возникает вопрос: как осуществляется перенос текста? Справиться в большинстве случаев браузер самостоятельно с этой задачей. Но иногда этот процесс надо взять под контроль, особенно оформляя длинные слова и фразы, которые теряют при неправильной передачи смысла.
Свойство word-wrap
В HTML для разделения строк специальный тег <br> не существует. Но его слишком частое использование считается дурным тоном среди разработчиков и часто свидетельствует о некомпетентности. В качестве доказательства, представьте себе, что вы хотите логотип и вы, что каждая буква начинается на новой строке:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test Arena слова</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 перенос слов осуществляется через элегантный способ. При этом избыточные маркер не возникает, только снижает скорость загрузки страниц.
Первая характеристика, по для обработки текста word-wrap. Принимает три значения: normal, break-all, keep-all. Для работы вам нужно только запомнить break-all. Нормальное значение по умолчанию, и указывать не имеет смысла. 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 и потом удивляться, почему ваши усилия не видны на странице. Сколько бы вы еще раз на "Enter", будет игнорироваться браузером. Но есть способ, чтобы его текст так, как вы хотите, и с учетом всех интервалов.
В документе перенос слов CSS, назначаемый свойство white-space может быть настроен таким образом, чтобы он осуществлялся с учетом пробела или ENTER. White-space со значением pre-line сделать браузер видим, в тексте ENTER.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test Arena слова</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-кода, перенос слов происходит с учетом пробелов. И наоборот, запретить любые передачи, используя Text-свойство white-space со значением nowrap:
#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: nowrap; } Text-overflow
Еще один полезный инструмент для работы с текстом text-overflow. Помимо перенос слов CSS свойства резки материалов позволяет, когда контейнер заполнен. Принимает два значения: клип — просто режет текст; ellipsis — добавляет точку.
#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis;/*Добавляем точку*/ white-space: nowrap; /* Запретить перенос слов */ overflow: hidden;/*Спрятать все, что выходит за рамки контейнера*/ }
Для того, чтобы свойство работало, элемент необходимо также скрытых запрет на перенос слов и overflow со значением. Автор: Церквей Ася 19. Сентябрь 2018
Категория: Hi-Tech
