Поиск по сайту:

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

Введение

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

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

Это предоставит вам несколько вариантов переноса или отсутствия переноса текста.

Предпосылки

Для выполнения этого урока вам понадобятся:

  • Редактор кода на ваш выбор, например nano или Visual Studio Code
  • Веб-браузер
  • Знакомство с основами HTML. Вы можете ознакомиться с нашей серией руководств «Как создать веб-сайт с помощью HTML» для ознакомления.

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

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

Сначала создайте и откройте новый файл с именем main.css с помощью nano или предпочитаемого вами редактора:

  1. 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, max-width границы, padding, и margin-bottom. Этот класс создаст визуальное поле, но не определяет никаких специальных свойств упаковки. Это означает, что он будет разрывать строки по умолчанию.

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

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

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

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

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

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

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

  1. 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 — скрытый с помощью многоточие до третьего. Вы назначили sammy-wrap четвертому образцу, но переопределяете перенос по умолчанию, вставляя неразрывные пробелы ( ) непосредственно в HTML. Если вам нужно предотвратить разрывы строк как одноразовую ситуацию, то неразрывные пробелы могут обеспечить быстрое решение.

Откройте index.html в веб-браузере и просмотрите результаты. Ваши четыре текстовых блока будут выглядеть следующим образом:

Вы успешно настроили свои свойства CSS, чтобы предотвратить или разрешить разрывы строк четырьмя различными способами.

Заключение

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