Предотвращение разрывов строки с помощью CSS

Введение

Разработчики обычно предпочитают применять на веб-страницах перенос по словам. Перенос по словам ограничивает текст и помогает предотвратить проблемы с дизайном. Также перенос текста по словам позволяет предотвратить необходимость горизонтальной прокрутки. Однако иногда бывает так, что нужно оставить блок текста на одной строке вне зависимости от ее длины. Вы можете предотвращать разрывы строк и перенос текста по словам для определенных элементов, используя свойство CSS white-space.

В этом учебном модуле мы определим стили одного и того же блока текста четырьмя разными способами, один раз с разрывами строки, а три раза без разрывов строки:

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.

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. Чтобы узнать больше, вы можете посмотреть нашу серию учебных модулей Создание сайта с помощью HTML.

Шаг 1 — Предотвращение и форсирование разрывов строки в CSS

На этом шаге мы создадим таблицу стилей с тремя разными классами. Каждый из них будет по разному обрабатывать разрывы строк: первый класс будет разбивать текст на строки стандартным способом, а второй и третий классы запретят создание новой строки и разрыва строки.

Для начала создайте новый файл с именем main.css, используя nano или предпочитаемый редактор:

nano main.css

Добавьте в файл следующий код, после чего у вас появятся три класса CSS, использующие несколько свойств, в том числе white-space:

.sammy-wrap {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
}
.sammy-nowrap-1 {
    border-radius: 6px;
    background-color: aliceblue;
    border: 2px dashed gray;
    max-width: 70%;
    padding: 1em;
    margin-bottom: .4em;
    white-space: nowrap;
}
.sammy-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;
}

Наш первый класс — .sammy-wrap. Он определяет шесть общих свойств CSS, в том числе border-radius, background-color, border max-width, padding и margin-bottom. Этот класс создает визуальное поле, но при этом не определяет каких-либо специальных свойств переноса текста. Это означает, что строки будут разбиваться по умолчанию.

Наш второй класс — .sammy-nowrap-1. Он определяет то же поле, что и .sammy-wrap, но добавляет новое свойство: white-space. Свойство white-space имеет множество опций, и все эти опции определяют обработку пробелов внутри заданного элемента. Здесь мы задаем для свойства white-space значение nowrap, предотвращающее разрывы строк.

Наш третий класс — .sammy-nowrap-2. Он добавляет свойство white-space и еще два дополнительных свойства: overflow и text-overflow. Свойство overflow обрабатывает переполнение с прокруткой, когда содержимое элемента выходит за границы этого элемента. Свойство overflow может сделать этот контент доступным для прокрутки, видимым или скрытым. Мы зададим для свойства overflow значение hidden, а затем используем свойство text-overflow для дополнительной настройки. Свойство text-overflow помогает сообщить пользователю, что часть текста остается скрытой. Мы установили для него значение ellipsis так, что строка не разрывается и не выходит за пределы поля. CSS скрывает лишний текст и использует значок ... для обозначения скрытого текста.

Сохраните и закройте файл.

Теперь у нас имеется таблица стилей и мы готовы создать небольшой файл HTML с примерами текста. Далее мы загрузим веб-страницу в браузер и посмотрим, как код CSS может предотвратить появление разрывов строки.

Шаг 2 — Создание файла HTML

После определения классов CSS вы можете применить их к образцам текста.

Создайте и откройте файл с именем index.html в предпочитаемом редакторе. Обязательно поместите его в ту же папку, что и файл main.css:

nano index.html

Добавьте в файл следующий код, который установит main.css как вашу таблицу стилей, а затем применит классы к полю с образцом текста:

<!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="sammy-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="sammy-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="sammy-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="sammy-wrap"    > Medusafish&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p>
</body>
</html>

Мы назначили стандартный стиль переноса по словам для первого блока текста, стиль nowrap — для второго, и стиль nowrap со свойством hidden и многоточием — для третьего. Для четвертого образца мы назначили стиль sammy-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.

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, чтобы заменить правила переноса текста по умолчанию. Чтобы узнать больше о переносе текста по словам и пробелах, изучите свойство white-space CSS в полном объеме.