Как отключить перенос слов css
Перейти к содержимому

Как отключить перенос слов css

  • автор:

CSS: Управление переносом текста в div и скрытие переполнения

Чтобы в CSS отключить перенос текста, используйте свойство white-space: nowrap; .

Скопировать код

.nowrap

Применять этот класс нужно к элементу HTML. html

Команда no-wrap и размеры контейнеров

Отсутствие переноса текста критически важно для сохранения целостности макетов элементов пользовательского интерфейса, таких как меню, заголовки или кнопки. Целостность достигается за счёт установки фиксированной ширины контейнера – это позволяет управлять текстом и предотвращать его перенос на краях.

Скопировать код

.fixed-container < width: 300px; /* Выберите размер на своё усмотрение */ >

Если текст превосходит ширину контейнера, можно применить text-overflow: ellipsis; , чтобы обозначить переполнение контейнера.

Скопировать код

.ellipsis < white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; /* Оптимальная ширина для этого приёма */ >

Таким образом, текст сохранится в одной строке, и если он не помещается в контейнер, его конец будет отображён многоточием (. ).

Визуализация

Можно представить отсутствие переноса текста в CSS как диспетчера поезда, который не допускает выхода слов (в данном случае пассажиров) за пределы вагонов:

Скопировать код

Стандартный перенос текста: "��������" �������� "����" "����" CSS без переноса текста: "��������" �������� "��������" 

Скопировать код

.no-wrap

Все слова сохраняются в одной строке и не переносятся на следующую.

Исследуем возможности no-wrap

Таблицы данных и информационные панели

В таблицах и на дашбордах ценится ясность и чёткость текста. Он обеспечивает лёгкость в чтении и экономию пространства.

Единообразие внешнего вида элементов интерфейса

Для того чтобы элементы интерфейса, например, кнопки и вкладки, выглядели одинаково, нужно гарантировать, что текст в них не будет переноситься.

Текстовый бегущая строка

Для тикеров и рекламных баннеров важно, чтобы текст прокручивался без внезапных переносов слов.

Преодолеваем проблемы и находим решения

Контроль над переполнением

Можно управлять переполнением содержимого, применив overflow-x: scroll; или overflow-y: hidden; :

Как убрать перенос слова у CSS?

59eb70c06ba87728732160.png

Как сделать так что-бы " О нас" не переносилось на новую строку в CSS?

  • Вопрос задан более трёх лет назад
  • 2040 просмотров

Комментировать

Решения вопроса 1

html css3 js jquery

для li задать white-space: nowrap;

Ответ написан более трёх лет назад

Нравится 1 1 комментарий

Евгений Балабаник @Evgeniy_Balabanyk Автор вопроса

Ответы на вопрос 0

Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Как сделать такую оберткудля формы?

  • 1 подписчик
  • 47 минут назад
  • 7 просмотров

Как запретить перенос текста в textarea?

При вводе большого количества текста в textarea строки автоматически переносятся. Как это запретить? Чтобы длинная строка уходила на край textarea но оставалась одной строкой?

  • Вопрос задан более трёх лет назад
  • 2575 просмотров

Комментировать

Решения вопроса 1

Алексей Уколов @alexey-m-ukolov Куратор тега CSS

textarea

Ответ написан более трёх лет назад

Только вот зачем? Textarea же и придумана для многострочного текста.

Алексей Уколов @alexey-m-ukolov Куратор тега CSS

Александр Вульф: автор же не хочет отключить возможность вводить несколько строк, он хочет перенос строк под контроль взять. Функционал при этом никак не меняется, просто при достижении границы поля ввода текст не будет переноситься автоматически.

Ответы на вопрос 0

Ваш ответ на вопрос

Войдите, чтобы написать ответ

html

  • HTML
  • +1 ещё

Как быстро менять ссылки Django?

  • 1 подписчик
  • 36 минут назад
  • 16 просмотров

Текст

Документация и примеры общих текстовых утилит для управления выравниванием, обтеканием, весом и т.д.

На этой странице На этой странице

Выравнивание текста

Легко выравнивайте текст по компонентам с помощью классов выравнивания текста. Для выравнивания влево, вправо и по центру доступны адаптивные классы, которые используют те же контрольные точки по ширине области просмотра, что и система сетки.

Текст с выравниванием по левому краю для всех размеров области просмотра.

Выровненный по центру текст на всех размерах области просмотра.

Текст с выравниванием по правому краю для всех размеров области просмотра.

Выровненный по левому краю текст на размерных области просмотра SM (маленький) или шире.

Выровненный по левому краю текст на размерных области просмотра MD (средний) или шире.

Выровненный по левому краю текст на размерных области просмотра LG (большой) или шире.

Выровненный по левому краю текст на размерных области просмотра XL (очень большой) или шире.

p class="text-start">Текст с выравниванием по левому краю для всех размеров области просмотра.p> p class="text-center">Выровненный по центру текст на всех размерах области просмотра.p> p class="text-end">Текст с выравниванием по правому краю для всех размеров области просмотра.p>  p class="text-sm-start">Выровненный по левому краю текст на размерных области просмотра SM (маленький) или шире.p> p class="text-md-start">Выровненный по левому краю текст на размерных области просмотра MD (средний) или шире.p> p class="text-lg-start">Выровненный по левому краю текст на размерных области просмотра LG (большой) или шире.p> p class="text-xl-start">Выровненный по левому краю текст на размерных области просмотра XL (очень большой) или шире.p>

Обратите внимание, что мы не предоставляем служебные классы для выравнивания текста по всей ширине. Хотя эстетически выровненный по ширине текст может выглядеть более привлекательно, он делает интервалы между словами более случайными и, следовательно, труднее читать.

Перенос текста и переполнение

Оберните текст классом .text-wrap .

Этот текст следует обернуть.

div class="badge bg-primary text-wrap" style="width: 6rem;">  Этот текст следует обернуть. div>

Запретить перенос текста с помощью класса .text-nowrap .

Этот текст должен переполнять родительский.

div class="text-nowrap bg-light border" style="width: 8rem;">  Этот текст должен переполнять родительский. div>

Разрыв слова

Предотвратите разрушение макета ваших компонентов длинными строками текста, используя .text-break для установки word-wrap: break-word и word-break: break-word . Мы используем word-wrap вместо более обычного overflow-wrap для более широкой поддержки браузеров и добавляем устаревший word-break: break-word , чтобы избежать проблем с гибкими контейнерами.

p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmp>

Обратите внимание, что разрыв слов на арабском языке невозможен, который является наиболее часто используемым языком RTL. Поэтому .text-break удаляется из нашего RTL-скомпилированного CSS.

Преобразование текста

Преобразование текста в компонентах с помощью классов капитализации текста.

Текст в нижнем регистре.

Текст в верхнем регистре.

p class="text-lowercase">Текст в нижнем регистре.p> p class="text-uppercase">Текст в верхнем регистре.p> p class="text-capitalize">Заглавный текст.p>

Обратите внимание, как .text-capitalize изменяет только первую букву каждого слова, не затрагивая регистр любых других букв.

Размер шрифта

Быстро изменить размер шрифта текста font-size . В то время как наши классы заголовков (например, .h1 – .h6 ) применяют font-size , font-weight и line-height , эти утилиты применяют только font-size . Размер этих утилит соответствует элементам заголовка HTML, поэтому по мере увеличения числа их размер уменьшается.

p class="fs-1">.fs-1 textp> p class="fs-2">.fs-2 textp> p class="fs-3">.fs-3 textp> p class="fs-4">.fs-4 textp> p class="fs-5">.fs-5 textp> p class="fs-6">.fs-6 textp>

Настройте свой доступный font-size , изменив карту Sass $font-sizes .

Толщина шрифта и курсив

С помощью этих утилит можно быстро изменить font-weight или font-style . Утилиты font-style сокращенно обозначаются как .fst-* , а утилиты font-weight сокращаются как .fw-* .

Более жирный текст (относительно родительского элемента).

Текст с нормальной толщиной.

Текст с легкой толщиной.

Более легкий текст (относительно родительского элемента).

Текст с обычным шрифтом

p class="fw-weight-bold">Жирный текст.p> p class="fw-weight-bolder">Более жирный текст (относительно родительского элемента).p> p class="fw-semibold">Полужирный текст.p> p class="fw-weight-normal">Текст с нормальной толщиной.p> p class="fw-weight-light">Текст с легкой толщиной.p> p class="fw-weight-lighter">Более легкий текст (относительно родительского элемента).p> p class="fst-italic">Курсивный текст.p> p class="fst-normal">Текст с обычным шрифтомp>

Высота линии

Измените высоту строки с помощью утилит .lh-* .

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

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

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

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

p class="lh-1">Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.p> p class="lh-sm">Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.p> p class="lh-base">Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.p> p class="lh-lg">Это длинный абзац, написанный для того, чтобы показать, как наши утилиты влияют на высоту строки элемента. Классы применяются к самому элементу или иногда к родительскому элементу. Эти классы можно настроить по мере необходимости с помощью нашего служебного API.p>

Моноширинный

Измените выделение на наш стек моноширинных шрифтов с помощью .font-monospace .

Это в моноширинном пространстве

Добавить комментарий

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