Css перенос текста в блоке: Укрощаем длинный текст средствами HTML и CSS — Блог

Есть ли какой-нибудь другой способ словесно обернуть текст внутри div? Я не могу использовать перенос слов в CSS, так как могу использовать только CSS1 и некоторые CSS2. *Use javascript или CSS…

У меня есть HTML и CSS, как показано в http://jsfiddle.net/Lijo/Ydjde / Проблема в том, что текст внутри div не ограничивается div. Он ломает div и пишет. Как мы можем обернуть текст внутри самого…

У меня есть UITextView, на котором я хотел бы отключить перенос слов, но оставить перенос символов включенным. В принципе, я хотел бы иметь длинную строку 200+ символов, которая все еще обертывается…

Есть ли способ сделать перенос слов в элементе управления меткой .NET? Я знаю, что есть альтернативный способ с использованием TextBox , собственность BorderStyle нет, собственность ReadOnly true и…

У меня есть какой-то текст в div. Это может быть любой текст Юникода под солнцем, включая китайский, японский и корейский. Теперь мне нужно взять этот текст и завернуть его в JavaScript каким-то…

У меня уже есть перенос слов для Eclipse PHP ( как я могу заставить перенос слов работать в файлах Eclipse PDT для PHP? ). а как насчет Eclipse Java? Существует ли аналогичный инструмент для…

Кто-нибудь здесь знает, если и как я мог бы включить перенос слов в консоли Python для длинных строк? Я не могу видеть их целиком, мне всегда приходится прокручивать окно вправо, чтобы получить всю…

Я использую sublime для автоматического переноса слов python кодовых строк, которые выходят за рамки 79 символов, как определяет Pep-8. Изначально я делал возврат, чтобы не выходить за пределы…

У меня есть следующие настройки в коде VS, чтобы отключить перенос слов editor.wordWrap: off, editor.wordWrapColumn: -1 Перенос слов по-прежнему не выключен. Это делает VS Code действительно…

Для расширения, над которым я работаю, наши конечные пользователи предпочли бы иметь такие опции, как перенос слов по умолчанию. Мы хотели бы иметь возможность установить это на уровне языка без…

Div без переноса строки — Знай свой компьютер

Здравствуйте. Необходимо чтобы при нехватке места в родительском блоке, дочерние не переносились на новую строку, а скрывались за правым краем и можно было их скроллить

Подскажите каким образом можно это сделать.

1 ответ 1

Для текста есть такая штука white-space: nowrap; Она делает именно то, что вам надо – текст в одну строку! А чтобы работать с другими объектами как с текстом, надо делать их строчными (inline), или строчно-блочными (inline-block). Тогда один объект будет вести себя как одно слово.

inline-block – еще и гораздо более лучший способ выстроить элементы друг за другом Короче говоря, вот ваше решение: http://jsfiddle.net/M8een/1/

У этого способа есть и свои особенности. На инлайны и на инлайн-блоки (как и на текст) влияет вертикальное выравнивание, которое по умолчанию baseline. Сделав плиточную структуру или, скажем, колонки при помощи инлайн-блока хочешь, чтобы они были выравнены по вертикали по верху и надо дополнительно указывать vertical-align: top;

Задача:

Имеем три блока div, которым присвоено свойство float со значением left.

Эти блоки обтекают друг друга и выстраиваются в одну линию.

Но, если теперь начинать сужать окно браузера, то один блок переносится под другой, когда ему не хватает места в окне. Поэтому такие элементы (со свойством float) называют плавающими.

Но, что делать, если мы не хотим, чтобы эти блоки смещались друг под друга?

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Решение здесь довольно простое. Нужно переназначить родителя для этих блоков и назначить ему фиксированную ширину.

По умолчанию, родителем для них является элемент body с шириной width:auto. Когда мы изменяли ширину окна браузера, изменялась и ширина элемента body.

Float работает следующим образом: если элементу с float не хватает места в родительском элементе, он переносится на новую строку. Это у нас и происходило.

Стоит только добавить новый родительский элемент с фиксированной шириной, как все встает на свои места:

Теперь, сколько бы мы не изменяли ширину окна браузера, блоки с float будут находиться на одной линии.

Будет только появляться горизонтальная полоса прокрутки.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Или зарегистрируйтесь через социальные сети:

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

Зачем переносить «непереносимое»

В большинстве случаев при отображении текстового содержимого веб-страниц в браузере перенос слов не применяется. Если слово не вмещается целиком в область экрана, то по умолчанию оно полностью « переезжает » на следующую строчку.

Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:

Решаем проблему переноса слов с помощью HTML

Перед тем, как рассмотреть перенос длинных слов в CSS , изучим возможности решения этой проблемы с помощью языка гипертекста.
Для этого в HTML имеется несколько вариантов:

• Использование символа мягкого разрыва ­ — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy , а после первой половины выводится знак переноса, похожий на дефис:

• Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте « разлома » знак переноса, что может негативно сказаться на читаемости всего текста:

Перенос слов средствами CSS

Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

1. word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:

Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

• normal – слова не переносятся;
• break-word – автоматический перенос слов;
• inherit – наследование значения родителя.

Пример, иллюстрирующий применение этого свойства:

В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:

Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .

1. word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.

Свойство принимает три значения:

• normal – используются правила переноса, установленные по умолчанию;
• word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
• keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.

1. hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:

• none – отключает перенос слов в CSS ;
• manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса (­) ;
• auto – браузер автоматически переносит слова на основе своих настроек.

должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

Запрет переноса слов

Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет переноса слов в css можно реализовать несколькими способами:

• С помощью неразрывного пробела &nbsp , который устанавливается в местах переноса строки или слов;
• Задав свойству white-space значение « nowrap » ( white-space: nowrap ).

Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.

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

Добавьте в файл следующий код, после чего у вас появятся три класса 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:

Добавьте в файл следующий код, который установит 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    > 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> 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> 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    > 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 в полном объеме.

Перенос элементов в контейнере — CSS: Flex

При использовании флекс-контейнера элементы стараются вместиться в него без переноса строки. При этом элементы внутри контейнера ведут себя примерно как строчные элементы — занимают только то пространство, которое им необходимо.

See the Pen css_flex_wrap_no-wrap by Hexlet (@hexlet) on CodePen.

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

See the Pen css_flex_wrap_wrap by Hexlet (@hexlet) on CodePen.

Я добавил отступы у элементов внутри контейнера, чтобы вы могли увидеть его реальную ширину. Такое поведение хоть и бывает полезным, но не является ожидаемым в большинстве случаев. Как в таком случае переносить элементы? Для этого существует свойство flex-wrap, которое говорит контейнеру переносить дочерние элементы при нехватке места.

Свойство flex-wrap может принимать одно из трёх значений:

• nowrap. Стандартное поведение флекс-контейнера. Элементы не переносятся и располагаются в одну строку даже при нехватке места.
• wrap. Данное значение говорит перенести элементы внутри контейнера при нехватке места.

See the Pen css_flex_wrap_wrap by Hexlet (@hexlet) on CodePen.

• wrap-reverse. То же самое, что и wrap, но происходит не просто перенос, а переворот блоков по главной оси. В данном случае строка со значениями 1 и 2 окажется ниже, в отличие от ситуации с использованием простого wrap

See the Pen css_flex_wrap_wrap-2 by Hexlet (@hexlet) on CodePen.

Использование flex-wrap — отличный выбор при создании адаптивных сайтов. Хоть одно свойство и не может решить всех проблем сразу, но его использование на основном каркасе сайта поможет автоматически переносить элементы на новую строку при нехватке места на мобильных устройствах.

Документация

Тэг br, а так ли он нужен?

Часто можно встретить, что начинающий верстальщик для реализации некоторых своих дизайнерских решений использует тэг <br/>. Однако остаётся актуальным вопрос «правильное ли это решение?».

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

<ul> 
   <li>Строка Списка первая</li>
   <li>Строка Списка вторая</li>
   <li>Строка Списка третья</li>
</ul>

Встречается код разряда:

Строка Списка первая<br/>
Строка Списка вторая<br/>
Строка Списка третья<br/ >

И таких неверных примеров большое количество.

Где не нужен br

Однако, если визуально можно достичь необходимого результата при помощи этого тэга, то почему бы его не использовать?

Ответ прост- этот тэг предназначен для переноса строки, а ни как не для создания списков и абзацев.

Верстка сайта, в котором часто встречается тэг <br/>, показывает низкую квалификацию «мастера». Для формирования правильной структуры документов искушённый верстальщик может использовать значительное количество специализированных тэгов, среди которых <li>, <p> и так далее. А для добавления необходимых визуальных эффектов используют стили css.

Ранее этот тэг использовался, к примеру, при написании стихов, где требовался перенос строки при незаконченной мысли. Однако при желании можно обойтись без него и здесь. Для этого есть даже несколько вариантов, первый это задать с помощью CSS ширину блока, а второй это вместо тэга <p> использовать тэг <pre>.

Для тех кто не знает что такое тэг <pre>— это тег, добавляющий на страницу предформатированный текст. Это значит, что пробелы, переносы строки и т.д. внутри его сохраняются.

При желании мы можем использовать полезные свойства <pre> у самых рядовых абзацев воспользовавшись кодом:

Хотелось бы отметить, что большинство верстальщиков, которые пишут семантический код, не включили тэг <br/> в перечень тэгов используемых при такой верстке.

Выводы

• Если возникает необходимость в создании списка на вашей странице, то не стоит использовать тег <br/> , для этого существуют теги <ul>, <ol>, <li>, а если вам не требуется отображение маркера списка, то не стоит возвращаться к злокачественному тегу, а просто стоит в css прописать list-style-type значение none. Например:

  <ul>
     <li> Строка первая </li>
     <li> Строка вторая </li>
     <li> Строка третья </li>
  </ul>
  <style>
     li {
       list-style-type: none;
     }
  </style>

• При написании текста для формирования абзацев следует использовать тег <p>. Ну, а если требуется создать некоторое расстояние между конкретными абзацами нам в помощь придёт CSS, с селекторами first-child, last-child, nth-child – для определения конкретного абзаца и свойствами padding, margin для задания необходимого отступа. Например:

  Нам нужен какой-нибудь текст.
  Который имеет несколько абзацев.
   
   
  И перед последним должен быть большой отступ.

  Не стоит делать этого так:

  Нам нужен какой-нибудь текст.<br/>
  Который имеет несколько абзацев.<br/>
  <br/>
  <br/>
  И перед последним должен быть большой отступ.

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

  <p> Нам нужен какой-нибудь текст.</p>
  <p> Который имеет несколько абзацев.</p>
  <p> И перед последним должен быть большой отступ.</p>

  А для создания необходимого промежутка между последним абзацем и текстом используем сss:

  p:last-child {
     padding-top: 25px;
  }
  </li>

• И последнее, для создания новой строки можно использовать вспомогательные элементы, к которым относятся <span> и <div>. Например:

  Контакты:
  (xx) xxx-xx-xx
  (xx) xx-xx-xxx
  bizonoff.net
  vaden-pro.ru

  Это можно сверстать:

  <div> 
  <span>Контакты:</span>
  <span>(xx) xxx-xx-xx</span>
  <span>(xx) xx-xx-xxx</span>
  <span>bizonoff.net</span>
  <span>vaden-pro.ru</span>
  </div>

  Ну а для переносов строк добавляем CSS:
  

Следовательно, при верстке качественного проекта, можно прекрасно обойтись и без <br/>, стоит лишь воспользоваться знаниями тэгов и использовать каждый из них по назначению.

Оценок: 10 (средняя 5 из 5)

• 10199 просмотров

Понравилась статья? Расскажите о ней друзьям:

Еще интересное

перелива-пленка | CSS-уловки

Свойство overflow-wrap в CSS позволяет указать, что браузер может разбивать строку текста внутри целевого элемента на несколько строк в другом неразрывном месте. Это помогает избежать необычно длинной строки текста, вызывающей проблемы с разметкой из-за переполнения.

  .example {
  переполнение-обертка: слово-прерывание;
}  

Значения

• нормальный : по умолчанию. Браузер разбивает строки в соответствии с обычными правилами переноса строк.Слова или непрерывные строки не разорвутся, даже если они переполнят контейнер.
• break-word : слова или строки символов, которые слишком велики, чтобы поместиться в их контейнер, будут разорваны в произвольном месте, чтобы вызвать разрыв строки. Символ дефиса не будет вставлен, даже если используется свойство дефисов .
• наследовать : целевой элемент должен наследовать значение свойства overflow-wrap , определенного для его непосредственного родителя.

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

См. Демонстрацию переноса пером / переноса слов Луи Лазариса (@impressivewebs) на CodePen.

Чтобы продемонстрировать проблему, которую пытается решить overflow-wrap , в демонстрации используется необычно длинное слово внутри относительно небольшого контейнера. Когда вы включаете break-word , слово разрывается, чтобы уместить небольшой объем доступного пространства, как если бы слово было несколькими словами.

Строка неразрывных пробелов ( & nbsp; ) будет обрабатываться таким же образом и также будет разрываться в подходящем месте.

overflow-wrap полезен при применении к элементам, которые содержат немодерируемый пользовательский контент (например, разделы комментариев). Это может предотвратить нарушение макета веб-страницы длинными URL-адресами и другими непрерывными строками текста (например, вандализмом).

Сходства с разрывом слова

  .element {
  слово-разрыв: сломать все;
}  

  -ms-word-break: сломать все;
     слово-разрыв: сломать все;

     / * Нестандартно для WebKit * /
     слово-разрыв: слово-разрыв;

-webkit-дефисы: авто;
   -moz-дефисы: авто;
        дефисы: авто;  

 ). 

 .dont-break-out {

  / * Технически они одинаковы, но используются оба * /
  переполнение-обертка: слово-прерывание;
  перенос слов: слово-разрыв;

  -ms-word-break: сломать все;
  / * Это опасный метод в WebKit, так как он везде ломает * /
  слово-разрыв: сломать все;
  / * Вместо этого используйте нестандартный: * /
  слово-разрыв: слово-разрыв;

  / * Добавляет дефис в месте разрыва слова, если поддерживается (без мигания) * /
  -ms-дефисы: авто;
  -moz-дефисы: авто;
  -webkit-дефисы: авто;
  дефисы: авто;

}  

  .ellipses {
  переполнение: скрыто;
  белое пространство: nowrap;
  переполнение текста: многоточие;
}  

  @mixin word-wrap () {
  переполнение-обертка: слово-прерывание;
  перенос слов: слово-разрыв;
  -ms-word-break: сломать все;
  слово-разрыв: сломать все;
  слово-разрыв: слово-разрыв;
  -ms-дефисы: авто;
  -moz-дефисы: авто;
  -webkit-дефисы: авто;
  дефисы: авто;
}  

  @mixin ellipsis () {
  переполнение: скрыто;
  белое пространство: nowrap;
  переполнение текста: многоточие;
}  

  .element {
  дефисы: нет | руководство | авто
}  

  Оцените эту ручку! 

 .дефис {
  перенос слов: слово-разрыв;
  переполнение-обертка: слово-прерывание;

-webkit-дефисы: авто;
   -moz-дефисы: авто;
        дефисы: авто;
}  

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


переполнение-обертка: наследование;
переполнение-обертка: начальная;
переполнение-обертка: вернуться;
переполнение-обертка: не установлено;
  

 нормальный | слово-разрыв | в любом месте 

  
 Говорят, рыбалка отличная на
  Озеро  Chargoggagoggmanchauggagoggchaubunagungamaugg ,
  хотя сам я там никогда не был. ( нормальный ) 
 Говорят, на рыбалке отлично
  Озеро  Chargoggagoggmanchauggagoggchaubunagungamaugg ,
  хотя сам я там никогда не был. ( overflow-wrap: где угодно ) 
 Говорят, на рыбалке отлично
  Озеро  Chargoggagoggmanchauggagoggchaubunagungamaugg ,
  хотя сам я там никогда не был.( overflow-wrap: break-word ) 
 Говорят, на рыбалке отлично
  Озеро  Chargoggagoggmanchauggagoggchaubunagungamaugg ,
  хотя сам я там никогда не был. ( разрыв слова ) 
 Говорят, на рыбалке отлично
  Озеро  Chargoggagoggmanchauggagoggchaubunagungamaugg ,
  хотя сам я там никогда не был. ( дефисы , без атрибута  lang ) 
 Говорят, на рыбалке отлично
  Озеро  Chargoggagoggmanchauggagoggchaubunagungamaugg ,
  хотя сам я там никогда не был.( дефисы , правила английского языка) 
 Говорят, на рыбалке отлично
  Озеро  Chargoggagoggmanchauggagoggchaubunagungamaugg ,
  хотя сам я там никогда не был. ( дефисы , правила Германии) 
  

  п {
   ширина: 13em;
   маржа: 2 пикселя;
   фон: золото;
}

.ow -where {
   переполнение-обертка: где угодно;
}

.ow-break-word {
   переполнение-обертка: слово-прерывание;
}

.word-break {
   слово-разрыв: сломать все;
}

.дефисы {
   дефисы: авто;
}
  

  div {
  белое пространство: nowrap;
  переполнение: скрыто;
}  

  
 тестирование большого количества текста, который просто не переносится, потому что это слишком длинное сообщение с таким количеством бесполезных слов, которые вы не можете прочитать сегодня, несмотря на все ваши усилия, включая растяжение браузера ширину до максимальной длины, если, однако, вы не использовали функцию уменьшения масштаба вашего браузера или вручную изменили CSS, и в этом случае вы определенно обманываете и разрушаете эту забавную маленькую игру, в которой я набираю столько слов, сколько можно уместить в один смехотворно долгий пробег предложение Анно Домини двадцать первого века, используя мою традиционную клавиатуру и два монитора с разрешением 1080p, прилагая все усилия, чтобы кропотливо болтать снова и снова, но просто не совсем повторяя себя, за исключением повторного использования пары слов в нескольких местах в этом HTML, хотя Было бы примерно в тысячу раз проще, чем то, что я делаю в этот день, бессмысленно избегать работы, несмотря на ее бесполезность, учитывая, что это приведет только к последствиям для моей Если мне придется усерднее работать, чтобы наверстать упущенное позже, конечно, все это, несмотря на усилия модератора, чтобы смягчить мои обширные усилия, чтобы сделать это отчасти приятным для чтения, делая его как можно дольше, кто может или не может отменить это изменение, несмотря на его полезность, так как предыдущее редактирование содержало только четыре слова, которые невозможно было обернуть даже без изменений CSS из-за их краткости, что неизменно создает больше вопросов, чем ответов, таких как можно найти в разделе комментариев, именно поэтому я создал это усилие, направленное на решение одного из вопросов о назначении атрибута переполнения, который, если вы изменили, вы теперь увидите, позволяет вам прочитать весь этот текст за счет преимуществ функций горизонтальной прокрутки, но с другой стороны, если использовалось только переполнение и text-wrap был пропущен, вы продолжите видеть вертикальную полосу прокрутки, если вы не установите фиксированную высоту для этого div, и в этом случае вы обязательно должны увидеть эту vertica l переполнение скрыто, хотя это могло бы произойти только в том случае, если вы не поместили этот пример в полноэкранный режим, за исключением того, что ваше окно просмотра установлено на достаточно маленькую высоту, которая на самом деле может быть дополнительно определена на указанное количество строк, а не на одну, используя набор высоты к множеству свойств CSS, определяемых line-height, которые могут быть процентами от белого пространства, и это действительно скроет вертикальное переполнение этой горы текста, что я действительно очень удивлен, что вам удалось задержаться здесь, чтобы прочитать из-за его легкомысленного характера на знаменитом сайте, известном программистам как Stack Overflow, и за это я поздравляю вас с потенциально потраченным впустую временем 
  

  белое пространство: nowrap;
  

  div {
    белое пространство: nowrap;
    переполнение: скрыто;
    переполнение текста: многоточие;
}
  

  

  Это действительно длинный заголовок, но он не превышает ширины родительского элемента.

  

  

   Текст, который никогда не переносится