Как предотвратить разрывы строк в CSS
Development | Комментировать запись
Часто текст, который помещается на веб-странице, требует переноса. Перенос текста по словам помогает устранить некоторые проблемы, связанные с дизайном, – например, горизонтальную прокрутку. Однако в отдельно взятых случаях может возникнуть необходимость сохранить блоки текста в рамках одной строки независимо от длины. CSS-свойство white-space позволяет предотвратить разрывы строк и перенос текста определенных элементов.
Данный материал научит вас по-разному стилизовать один и тот же текстовый блок. Вы узнаете 4 способа стилизации, один из которых поддерживает разрывы строк, а остальные три – нет. Вот как они выглядят:
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Требования
- Любой редактор кода, например, nano или Visual Studio Code.
- Веб-браузер.
- Владение основами HTML. Освежить знания можно при помощи этой серии.
1: Управление разрывами строк в CSS
Сначала мы создадим таблицу стилей с тремя классами, каждый из которых будет обрабатывать разрывы по-своему: первый класс разобьет текст по умолчанию, а второй и третий классы предотвратят создание новых строк и разрывов.
Откройте с помощью nano или другого редактора новый файл по имени main.css:
nano main.css
Поместите в него следующие строки:
.my-wrap {
border-radius: 6px;
background-color: aliceblue;
border: 2px dashed gray;
max-width: 70%;
padding: 1em;
margin-bottom: .4em;
}
.my-nowrap-1 {
border-radius: 6px;
background-color: aliceblue;
border: 2px dashed gray;
max-width: 70%;
padding: 1em;
margin-bottom: .4em;
white-space: nowrap;
}
.my-nowrap-2 {
border-radius: 6px;
background-color: aliceblue;
border: 2px dashed gray;
max-width: 70%;
padding: 1em;
margin-bottom: .4em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Теперь у вас есть три CSS-класса с разными свойствами, среди которых есть и white-space. Давайте рассмотрим их подробнее.
Первый класс называется .my-wrap и определяет шесть общих свойств CSS, а именно border-radius, background-color, border max-width, padding и margin-bottom. Он создает визуальный блок, но не определяет никаких специальных свойств, касающихся переноса. Следовательно, он по умолчанию будет разрывать строки.
Второй класс называется .my-nowrap-1 и определяет такой же блок, как и первый класс. Однако он также имеет свойство white-space. Оно поддерживает множество параметров, каждый из которых определяет, как должно обрабатываться пустое пространство внутри данного элемента. В этом примере мы установили значение nowrap, которое предотвращает все разрывы строк.
Третий класс называется .my-nowrap-2. Как видите, он содержит white-space и еще два дополнительных свойства: overflow и text-overflow. Свойство overflow обрабатывает переполнение с прокруткой (это происходит, когда контент внутри элемента выходит за его границы). То есть свойство overflow делает выходящий за границы элемента контент прокручиваемым, видимым или скрытым. В данном случае overflow имеет значение hidden (то есть контент будет скрыт). Свойство text-overflow позволяет нам добавить больше настроек, например, сообщить пользователю, что часть текста оказалась скрыта. В нашем примере это свойство имеет значение ellipsis, потому теперь строка не будет ни разрываться, ни выходить за пределы рамки. CSS скроет переполняющий текст и сообщит об этом при помощи троеточия (…).
Сохраните и закройте этот файл.
Итак, у нас есть таблица стилей. Теперь мы может создать небольшой HTML-файл с каким-нибудь фрагментом текста. После этого мы загрузим веб-страницу в браузер и посмотрим, как CSS может обрабатывает разрывы строк.
2: Создание HTML-файла
Давайте теперь попробуем применить написанные классы их к фрагменту текста.
Откройте файл index.html в вашем редакторе. Обязательно поместите его в ту же папку, в которой находится предыдущий файл, main.css.
nano index.html
Добавьте в этот файл такие строки:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>How To Prevent Line Breaks with CSS</title> <link href="main.css" rel="stylesheet"> </head> <body> <p class="my-wrap" > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p> <p class="my-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p> <p class="my-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p> <p class="my-wrap" > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p> </body> </html>
Этот код объявит файл main.css в качестве таблицы стилей, а затем применит написанные в нем классы к образцу текста.
Первому текстовому блоку мы присвоили стандартный стиль переноса, второму – стиль nowrap, третьему – ellipsis. Четвертому фрагменту присвоен стиль my-wrap, но здесь мы переопределили стандартный перенос и вставили неразрывные пробелы ( ) прямо в HTML. Если вам нужно единожды предотвратить перенос строки, неразрывные пробелы – отличное быстрое решение в подобной ситуации.
Теперь откройте файл index.html в веб-браузере и просмотрите, что получилось. На странице вы должны увидеть такие четыре текстовых блока:
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Это значит, что вы успешно настроили CSS-свойства, которые управляют разрывами строк.
Заключение
В этом руководстве вы узнали, как использовать CSS-свойство white-space для предотвращения разрывов строк в текстовом блоке.
Tags: CSS, HTML