Tutorial

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

Published on December 15, 2020
authorauthor

Alligator.io and Matt Abrams

Русский
Предотвращение разрывов строки с помощью 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.

Это даст вам несколько способов выбрать, нужно ли переносить текст по словам.

Предварительные требования

Для данного обучающего руководства вам потребуется следующее:

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

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

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

  1. nano main.css

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

./main.css
.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:

  1. nano index.html

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

./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="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 неразрывные пробелы (&nbsp;). Если вам нужно предотвратить разрывы строки в одном частном случае, неразрывные пробелы могут помочь сделать это быстро.

Откройте файл 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 в полном объеме.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author



Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel