Содержание

Простой HTML-тег, который делает переносы правильными и красивыми

Проблема: в макете для вёрстки есть очень длинное слово, которое не помещается внутри блока на небольших экранах. Нужно сделать в HTML перенос строки.

Ужасное решение: вставить посреди этого слова тег <br>, который разрывает строку. Дизайнер будет ругаться, но зато слово влезет.

Неплохое решение: использовать свойство CSS word-break: break-all. Выглядит симпатичнее разрыва строки, но есть проблема — мы не контролируем перенос слова.

Отличное решение: использовать одиночный тег мягкого переноса <wbr>. С его помощью можно точно указать, какая часть слова будет переноситься.

Чтобы разница между <wbr> и word-break: break-all была наглядной, посмотрим пример кода. Меняйте размеры блоков по горизонтали, чтобы видеть брейкпоинты.

See the Pen
wbr by Pochemuta (@pochemuta)
on CodePen.

Пояснение:

  1. При word-break: break-all буквы переносятся как попало. Если критично, чтобы соблюдались правила переносов, то это решение не подходит.
  2. При <wbr> части слова переносятся так, как мы указываем в коде. Можно наставить тег между слогами, чтобы на любом разрешении правила переносов соблюдались.

Если нужно, чтобы между частями слова был видимый знак переноса, то используем вместо <wbr> символ мягкого дефиса — &shy;.

В спецификации W3C приводится ещё один пример использования тега — обёртывание частей кода, если вся строка не помещается внутри блока.

Поддержка в браузерах: полная, за исключением Internet Explorer 8-11.

Запомнить: если нужно управляемо перенести длинные слова или строки кода, используем тег <wbr>.

Теперь вы знаете, как сделать в HTML перенос на новую строку, чтобы это выглядело красиво.

Переносы – Setka Editor

В этой статье речь пойдёт о переносах слов по слогам, с помощью дефисов. Когда переносы выключены, слова пишутся с новой строки, если не вмещаются в текущую.

Как работают автоматические переносы

Автоматические переносы на мобильных устройствах

Автоматические переносы в десктопной версии

Отключение автоматических переносов

В конкретном посте

Во всех постах

Неразрывные пробелы

 

Правила переноса текста зависят от языка. В HTML язык определяется атрибутом lang. Браузер переносит слова по слогам только если соблюдены 2 условия:

1. Атрибут lang присутствует в коде страницы.

2. Доступен соответствующий словарь переносов.

Язык можно установить как для всего сайта (средствами CMS), так и для каждой страницы в отдельности.

 

Автоматические переносы на мобильных устройствах

На узких экранах, для текстовых элементов, созданных в Setka Editor, по умолчанию добавляется CSS-свойство

hyphens: auto. Таким образом, в мобильной версии статьи, автоматически включаются переносы.

 

Автоматические переносы в десктопной версии

По умолчанию, автоматические переносы отключены для десктопной версии сайта. Чтобы активировать их на своём сайте:

1. Убедитесь, что в шаблоне страницы есть элемент lang со значением, соответствующим языку страницы.

2. Добавьте в стили вашего сайта (в шаблоне страницы) код:

.stk-reset {hyphens: auto;}

Подробная инструкция по настройке автоматических переносов на стороне CMS

 

Иногда автоматические переносы не отвечают дизайн-идее поста. Для таких случаев их можно отключить средствами Setka Editor.

 

В конкретном посте

Чтобы отключить переносы для отдельного поста:

1. Перейдите в редакторе во вкладку Пост.

2.  Откройте дополнительное меню кнопкой .

3. В поле Добавить CSS пропишите следующий код:

-webkit-hyphens: manual; hyphens: manual;

Подробнее о кастомизации CSS

 

Во всех постах

Чтобы отключить переносы во всех постах, созданных в Setka Editor, пропишите следующее свойство в CSS стиля в личном кабинете:

.stk-reset {
-webkit-hyphens: manual;
hyphens: manual;
}

 

Если 2 слова разделены неразрывным пробелом, они принудительно остаются в одной строке. Таким образом, неразрывный пробел позволяет запретить перенос слова на следующую строку.

Чтобы добавить неразрывный пробел используйте сочетания клавиш: 

  • Для Mac OS — ALT+SPACE
  • Для Windows — CTRL+SHIFT+SPACE.

Примечание: чтобы автоматически расставить все неразрывные пробелы в тексте, в соответствии с правилами типографики, используйте встроенный типограф.

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



Я чувствую себя глупо из-за того, что не могу понять этого, но как мне отключить wordwrap? свойство css word-wrap может быть принудительно включено с помощью break-word, но не может быть принудительно отключено (только может быть оставлено наедине со значением normal ).

Как мне заставить слово обернуться ?

html css word-wrap
Поделиться Источник Alexander Bird     10 января 2011 в 23:19

4 ответа


  • Отключить перенос слов в firebug

    Когда я разворачиваю слишком много узлов, а положение узла находится слишком близко к правой боковой панели, поэтому ему не хватает места, вместо того чтобы полоса прокрутки стала меньше (чтобы я мог прокрутить вправо, чтобы увидеть всю линию), firebug разрывает линию. Как я могу отключить это…

  • UITextView перенос символов, но не перенос слов

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



867

Вам нужно использовать атрибут CSS white-space.

В частности, white-space: nowrap и white-space: pre являются наиболее часто используемыми значениями. Первый, похоже, и есть то, что вам нужно.

Поделиться Jon     10 января 2011 в 23:21



25

Добавлено webkit конкретных значений, отсутствующих сверху

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */

Поделиться Matas Vaitkevicius     07 июля 2015 в 15:07



4

Интересно, почему вы находите в качестве решения «white-space» с «nowrap» или «pre», это не делает правильное поведение: вы заставляете свой текст в одной строке! Текст должен разбивать строки, но не разбивать слова по умолчанию. Это вызвано некоторыми атрибутами css: переносом слов, переносом переполнения, разрывом слов и дефисами. Так что вы можете либо:

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Таким образом, решение состоит в том, чтобы удалить их или переопределить их с помощью «unset» или «normal»:

word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;

UPDATE: я предоставляю также доказательство с JSfiddle: https://jsfiddle.net/azozp8rr/

Поделиться zod     12 мая 2018 в 09:55


  • Emacs-отключить перенос слов в html-режиме

    В моем emacs html-режиме перенос слов происходит, если пересечь легендарный предел в 80 столбцов. Как я могу его отключить?

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

    Мой JEditorPane автоматически обертывает слова; я не хочу этого. Все, что я хочу, — это чтобы появилась горизонтальная полоса, которая позволяет пользователю писать столько, сколько он хочет. Как я могу это сделать? Я испробовал несколько методов. Я переопределил getScrollableTracksViewportWidth()…



2

Это сработало для меня, чтобы остановить глупые перерывы в работе в текстовых областях Chrome

word-break: keep-all;

Поделиться Ryan Charmley

    02 октября 2019 в 21:54


Похожие вопросы:


Как отключить перенос слов в Редакторе Xcode 4?

Я не могу найти, Как отключить перенос слов в Редакторе Xcode 4. Как я могу это сделать?


Отключить перенос слов в JTextPane

Я не могу найти простой способ отключить перенос слов в JTextPane. Я не могу использовать JTextArea, потому что мне нужны разные цвета для разных текстов. У меня есть эти большие уродливые линии,…


Как отключить перенос слов в Android Multiline TextView?

Возможный Дубликат : Отключить перенос слов в многострочном Android TextView У меня есть вопрос о Android TextView. Можно ли отключить перенос слов в многострочном TextView? Я хочу использовать…


Отключить перенос слов в firebug

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


UITextView перенос символов, но не перенос слов

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


Emacs-отключить перенос слов в html-режиме

В моем emacs html-режиме перенос слов происходит, если пересечь легендарный предел в 80 столбцов. Как я могу его отключить?


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

Мой JEditorPane автоматически обертывает слова; я не хочу этого. Все, что я хочу, — это чтобы появилась горизонтальная полоса, которая позволяет пользователю писать столько, сколько он хочет. Как я…


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

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


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

NSTextView по умолчанию выполняет перенос слов. Как я могу отключить это? Я делаю просмотрщик кода JSON, поэтому мне нужно отключить его.


Отключить перенос слов в VS-коде

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

Создание классических типографских эффектов: перенос слов

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

 

 


Есть три способа создания переноса слов на веб-странице:

Вставить элемент HTML &shy; или &#x00AD; — «мягкий перенос» в те места слов, в которых они могут быть разорваны. Это можно считать подсказкой места для переноса слов, и перенос не должен появится, если все слово может поместиться на строку, но если может влезть только часть слова до этого элемента, слово будет разорвано и перенос будет показан в браузере. К сожалению, поддержка мягких переносов на данный момент неполная.

 Вставить тег <wbr> в качестве альтернативы . Тут используется та же идея с подсказкой места для переноса слова, несколько более широкая поддержка, но отсутствие символа переноса там, где браузер разрывает слово.

 Применение свойств CSS переноса и разрыва слов.

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

p {
        word-break: break-word;
        -ms-word-break: break-all;
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
}

Значения для свойства переноса слов требуются для браузеров Internet Explorer версии 8 и 9 и для браузеров Chrome и Opera. К сожалению, они до сих пор не поддерживают свойство CSS переноса слов, но в них слова будут разбиты на строки.

В результате получим следующее:


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

Чтобы добиться правильного переноса слов, нужно задать язык содержимому веб-страницы, что позволит браузеру обратиться к словарю за соответствующими расположениями разрыва слов. Проще всего добавить язык в открывающий тег <html>:

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

overflow-wrap — CSS | MDN

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

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Исходники для интерактивных примеров хранятся в GitHub репозитории. Если вы хотите законтребьюить в проект с примерами, пожалуйста, склонируйте  https://github.com/mdn/interactive-examples и пришлите нам пул реквест.

Note: В отличие от word-break, overflow-wrap создает перенос только, если целое слово не может быть размещено на своей линии без переполнения

Изначально свойство word-wrap не было стандартом, хотя и было реализовано большинством браузеров. Впоследствии оно было переименовано в overflow-wrap c алиасом word-wrap.


overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;


overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: unset;

Свойство overflow-wrap задается с помощью ключевого слова и выбирается из списка значений приведенных ниже:

Values

normal
Разрыв строк происходит согласно обычным правилам разрыва (такими как пробел между двумя словами).
anywhere
Чтобы избежать выхода текста за границы элемента, таких как длинных слов или URL, неразрывная строка символов может быть разбита в любой точке, если в строке нет других допустимых точек разрыва. Тире не вставляется. Возможность мягкого переноса, представленная разрывом слов, рассматривается, когда вычисляется минимальный контент внутренних размеров.
break-word
Так же как и со значением anywhere, слова, которые обычно нельзя перенести по слогам, могут быть разбиты в произвольных точках, если нет других допустимых разрывов в строке, но возможность мягкого переноса, представленная разрывом слов не рассматривается, когда вычисляется минимальный контент внутренних размеров.
normal | break-word | anywhere

Сравнение overflow-wrap, word-break, и hyphens

Этот пример сравнивает результаты применения overflow-wrap, word-break, и hyphens, когда разбивается длинное слово.

HTML
<p>They say the fishing is excellent at
  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>normal</code>)</p>
<p>They say the fishing is excellent at
  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: anywhere</code>)</p>
<p>They say the fishing is excellent at
  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>overflow-wrap: break-word</code>)</p>
<p>They say the fishing is excellent at
  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>word-break</code>)</p>
<p>They say the fishing is excellent at
  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>hyphens</code>, without <code>lang</code> attribute)</p>
<p lang="en">They say the fishing is excellent at
  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>hyphens</code>, English rules)</p>
<p lang="de">They say the fishing is excellent at
  Lake <em>Chargoggagoggmanchauggagoggchaubunagungamaugg</em>,
  though I've never been there myself. (<code>hyphens</code>, German rules)</p>
CSS
p {
   width: 13em;
   margin: 2px;
   background: gold;
}

.ow-anywhere {
   overflow-wrap: anywhere;
}

.ow-break-word {
   overflow-wrap: break-word;
}

.word-break {
   word-break: break-all;
}

.hyphens {
   hyphens: auto;
}
Result

BCD tables only load in the browser

CSS перенос слов в div



У меня есть div шириной 250 пикселей. Когда внутренний текст шире этого, я хочу, чтобы он сломался. Div-это float: left, и теперь у него есть переполнение. Я хочу, чтобы полоса прокрутки исчезла с помощью переноса слов. Как я могу этого достичь?

<div>
<div>
    <div>
        <asp:Label runat="server"></asp:Label>
    </div>
    <div>
        <asp:ImageButton runat="server" 
            ImageUrl="Graphics/close.png" 
            BorderWidth="0" ToolTip="Sluit handboek" />
    </div>
</div>
<asp:TreeView runat="server" RootNodeStyle-CssClass="RootNode">
    <Nodes>

    </Nodes>
</asp:TreeView>
</div>

CSS:

#Treeview
{
padding-right: 5px;
width: 250px;
height: 100%;
float: left;
border-right: solid 1px black;
overflow-x: scroll;
}
css html word-wrap
Поделиться Источник Martijn     02 февраля 2009 в 08:09

8 ответов


  • CSS: в таблице HTML перенос слов не работает с float: left

    У меня есть таблица с тремя столбцами, и я хочу установить текстовый фон в ячейке в зависимости от длины содержимого. Но когда я устанавливаю float: left, перенос слов работает не очень хорошо. table { table-layout: fixed; width: 100%; word-wrap: break-word; } Это содержание в каждой клетке….

  • Перенос слов не работает должным образом

    Я пытаюсь понять, почему перенос слов не работает должным образом на этой странице для класса div: .gce-page-list http://metaphysicalerotica.com/events / Похоже, что тема добавила тег pre и code, и если я удалю тег pre, все будет работать нормально, однако мне нужно исправить CSS, чтобы заставить…



110

Как сказал Эндрю, ваш текст должен делать именно это.

Есть один пример, который я могу придумать, который будет вести себя так, как вы предлагаете, и это если у вас есть набор свойств whitespace.

Посмотрите, нет ли у вас где-нибудь следующего в вашем CSS:

white-space: nowrap

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

OK, мои извинения, не уверен, что отредактировал или добавил наценку позже (сначала не видел).

Свойство overflow-x-это то, что вызывает появление полосы прокрутки. Удалите это, и div настроится настолько высоко, насколько это необходимо, чтобы содержать весь ваш текст.

Поделиться Jayx     02 февраля 2009 в 08:24



102

Или просто использовать

word-wrap: break-word;

поддерживается в браузерах IE 5.5+, Firefox 3.5+ и WebKit, таких как Chrome и Safari.

Поделиться Jc Figueroa     06 декабря 2011 в 19:16



19

попробуйте white-space:normal; это переопределит наследование white-space:nowrap;

Поделиться gordon     29 марта 2017 в 20:01


  • CSS 3.0 переполнение-перенос и перенос слов

    Мне нужен перенос слов в моем css, и сразу же я получил эту ошибку: Validation (CSS 3.0): ‘word-wrap’ is not a known CSS property name. После некоторых исследований я обнаружил, что слово-wrap было заменено на overflow-wrap. Когда я использую его, я получаю: Validation (CSS 3.0): ‘overflow-wrap’…

  • CSS перенос слов и встроенный блок не работают

    У меня есть длинный текст без пробелов (например, URL) в <div> . <div> <span>veryverylongtextwithoutspaces</span> </div> Если я установлю display:inline-block; , то перенос слов не сработает! Если я установил display: block , то перенос слов работает так, как должен!…



8

Довольно трудно сказать определенно, не видя, как выглядит рендеринг html и какие стили применяются к элементам внутри treeview div, но то, что сразу бросается мне в глаза, — это

overflow-x: scroll;

Что произойдет, если вы удалите это?

Поделиться Andrew     02 февраля 2009 в 08:27



3

Вы можете использовать:

overflow-x: auto; 

Если вы установите ‘auto’ в overflow-x, прокрутка появится только тогда, когда внутренний размер будет больше, чем область DIV

Поделиться Unknown     04 марта 2009 в 19:51



2

Я немного удивлен, что это не просто так. Может ли быть еще один элемент внутри div, ширина которого установлена на что-то большее, чем 250?

Поделиться Andrew     02 февраля 2009 в 08:14



1

Установка только свойств width и float css приведет к созданию оберточной панели. Следующий пример работает просто отлично:

<div>
Pellentesque feugiat tempor elit. Ut mollis lacinia quam. 
Sed pharetra, augue aliquam   ornare vestibulum, metus massa
laoreet tellus, eget iaculis lacus ipsum et diam. 
</div>

Может быть, есть и другие стили, которые изменяют внешний вид?

Поделиться Aleris     02 февраля 2009 в 08:17


Поделиться atomh43ls     26 сентября 2019 в 05:21


Похожие вопросы:


Вызывая перенос слов: брейк-слово в CSS

У меня есть <div> , который содержит <p> , в котором я хочу, когда p больше, чем экран пользователя (например, пользователь намеренно публикует длинную строку символов, чтобы сломать…


перенос слов очень длинные строки

Как вы можете отобразить длинную строку, адрес веб-сайта, слово или набор символов с автоматическими разрывами строк, чтобы сохранить ширину div? Наверное, что-то вроде словесной обертки. Обычно…


CSS 2.1: Перенос Текста Внутрь Div

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


CSS: в таблице HTML перенос слов не работает с float: left

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


Перенос слов не работает должным образом

Я пытаюсь понять, почему перенос слов не работает должным образом на этой странице для класса div: .gce-page-list http://metaphysicalerotica.com/events / Похоже, что тема добавила тег pre и code, и…


CSS 3.0 переполнение-перенос и перенос слов

Мне нужен перенос слов в моем css, и сразу же я получил эту ошибку: Validation (CSS 3.0): ‘word-wrap’ is not a known CSS property name. После некоторых исследований я обнаружил, что слово-wrap было…


CSS перенос слов и встроенный блок не работают

У меня есть длинный текст без пробелов (например, URL) в <div> . <div> <span>veryverylongtextwithoutspaces</span> </div> Если я установлю display:inline-block; , то…


css перенос слов с многоточием

Используя только CSS, я хочу как перенос слов, так и многоточие, как только контейнер заполняется вертикально. Согласно исследованиям, я могу иметь многоточие только в том случае, если white-space:…


Перенос слов в CSS3

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


Перенос слов в ячейку таблицы

Я пытаюсь применить перенос слов в ячейке таблицы, но это не работает. Строка обертывается, если имя файла содержит пробел, но если его нет, то моя таблица выходит из div. Я также попробовал…

CSS свойство разрыва слова



Определение и использование

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

Значение по умолчанию: нормальный
Унаследовано: да
Анимация: нет. Прочитать о animatable
Версия: CSS3
Синтаксис JavaScript: объект .style.wordBreak = «сломать все» Попытайся

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.

Имущество
разрыв слова 4,0 5,5 15,0 3.1 15,0

Синтаксис CSS

слово-разрыв: нормальный | разрыв-все | сохранить-все | разрыв-слово | начальный | наследование;

Стоимость недвижимости

Значение Описание
нормальный Значение по умолчанию. Использует правила разрыва строки по умолчанию
обкатка Для предотвращения переполнения слово может быть разбито на любой символ
хранить все Для текста на китайском / японском / корейском (CJK) языке не следует использовать разрывы слов.Поведение текста, отличного от CJK, такое же, как и у значения «normal»
слово прерывания Для предотвращения переполнения слово может быть разбито в произвольных точках
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальные
наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

Обработка длинных слов и URL-адресов (принудительные разрывы, расстановка переносов, многоточие и т. Д.)

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

Например:

В URL обычно нет пробелов, поэтому они часто являются виновниками.

Вот большой фрагмент со всеми задействованными игроками CSS:

  .dont-break-out {

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

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

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

}  

Это решит проблему для нас:

Вот совок:

  • переполнение-перенос: слово прерывания; следит за тем, чтобы длинная нить обернулась и не выскочила из контейнера.Вы также можете использовать word-wrap , потому что, как сказано в спецификации, они буквально являются просто альтернативными именами друг для друга. Некоторые браузеры поддерживают одно, а не другое. Firefox (проверено v43) поддерживает только перенос слов . Blink (проверено Chrome v45) примет любой.
  • Когда overflow-wrap используется сам по себе, слова будут ломаться везде, где им нужно. Если есть символ «допустимого разрыва» (например, буквальное тире), он там прервется, в противном случае он просто сделает то, что ему нужно.
  • Вы также можете использовать дефисов и , потому что тогда он попытается со вкусом добавить дефис там, где он ломается, если браузер его поддерживает (Blink не поддерживает на момент написания, Firefox делает).
  • word-break: разбить все; сообщает браузеру, что можно разбивать слово везде, где это необходимо. Несмотря на то, что это так или иначе, я не уверен, в каких случаях это необходимо на 100%.

Если вы хотите, чтобы дефисы были более ручными, вы можете предложить их в разметке.Смотрите больше на странице MDN.

Поддержка браузера

Для
разрыв слова :
Desktop
Chrome Firefox IE Edge Safari
44 15 5.5 12 9
900 Mobile /
Android Chrome Android Firefox Android iOS Safari 88 86 81 9.0-9,2
Для
hypens :
Настольный компьютер
Chrome Firefox IE Edge Safari
88 6 * 10 * 12 * 5,1 *
Мобильный / Планшет
Android Chrome Android Firefox Android iOS Safari
88 86 81 4.2-4,3 *
Для
переполнение-обертка :
Desktop
Chrome Firefox IE Edge Safari
23 49 11 18 6,1
10 Mobile /
Android Chrome Android Firefox Android iOS Safari 88 86 4.4 7,0-7,1
Для
переполнение текста :
Desktop
Chrome Firefox IE Edge Safari
4 7 6 12 3,1
10 Mobile /
Android Chrome Android Firefox Android iOS Safari 88 86 2.1 3,2

Предотвращение переполнения с помощью многоточия

Еще один подход, который следует рассмотреть, — это полное усечение текста и добавление эллипсов там, где строка текста попадает в контейнер:

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

Хорошая особенность использования text-overflow заключается в том, что он поддерживается повсеместно.

Примеры

См. Перо с переносом длинных слов от CSS-Tricks (@ css-tricks) на CodePen.

См. Эллипсы пера от CSS-Tricks (@ css-tricks) на CodePen.

См. Статью Криса Койера (@chriscoyier) на CodePen.

Дополнительные ресурсы

Для SCSS-наклонного

Обычно это такие вещи, которые вы добавляете в код там, где это необходимо, поэтому они создают хорошие @mixins:

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

html — разница между переносом через переполнение и разрывом слова?

Вот точные различия: (на основе тестирования в Chrome v81 и подтверждения моих наблюдений ссылкой на спецификацию)

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

нормальный (по умолчанию): сворачивает цепочки пробелов и разрывы строк; добавляет разрывы строк там, где это необходимо.
nowrap : сворачивает цепочки пробелов и разрывы строк; не добавляет разрывы строк
перед строкой : сворачивает цепочки пробелов; добавляет разрывы строк там, где это необходимо.
pre-wrap : без сворачивания; добавляет разрывы строк там, где это необходимо
пробелов-разрывов : то же, что и перед переносом, за исключением пробелов, способных запускать добавление разрыва строки
до : без сворачивания; не добавляет перенос строки

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

разрыв слов

нормальный (по умолчанию): разрыв строки в конце последнего слова, подходящего в контейнере [если он существует], иначе строка остается неразрывной
break-word : разрыв строки в конце последнего слова, подходящего в контейнере [если он существует] , иначе в конце контейнера
разбить все : разрывает строку в конце контейнера [можно разделить слово, даже с соседним пробелом]

overflow-wrap (устаревшее название: word-wrap)

нормальный (по умолчанию): разрыв строки в конце последнего слова, подходящего в контейнере [если он существует], в противном случае строка остается неразрывной
break-word : разрыв строки в конце последнего слова, подходящего в контейнере [если он существует] , иначе в конце контейнера [в негибком контейнере], в противном случае строка осталась неразрывной
в любом месте : разрыв строки в конце последнего слова, подходящего в контейнере [если он существует], в противном случае в конце контейнера [так же, как word-break: break-word ]

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

слов | Codrops

Свойство word-wrap используется, чтобы указать, могут ли строки разрываться внутри слов, которые настолько длинные, что они переполняют свой контейнер и которые в противном случае не могут быть разбиты по умолчанию.

Чем оно отличается от свойства разбиения по словам ? Что ж, свойство word-break разбивает строку между двумя символами слова, которое находится в конце этой строки, чтобы вся строка помещалась внутри своего контейнера.Но свойство word-wrap , с другой стороны, разбивает слово, когда само слово занимает всю строку и выходит за пределы этой строки; то есть, когда само слово слишком длинное, чтобы оно вышло за пределы своего контейнера, поэтому мы заставляем его обертывать только строку, которую строка будет переносить, чтобы поместиться внутри своего контейнера.

Свойство word-wrap действует только тогда, когда white-space разрешает перенос.

Свойство word-wrap называется overflow-wrap в спецификации CSS Text Level 3 (которая все еще является рабочим проектом, поэтому все может измениться).

Общая информация и примечания

Два свойства ( word-break и word-wrap ) различаются правилами и переполнением слов: как упоминалось ранее, word-wrap используется для разрыва слов, которые переполняют их контейнер, а свойство word-break разбивает все слов в конце строки, даже те, которые обычно переносятся на другую строку и не переполняют свой контейнер.

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

Значения

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

Примеры

Следующая строка разбивает все слова (внутри абзацев), которые слишком длинные и обычно переполняют свой контейнер.

п {
    перенос слов: слово-пауза;
}
                 

Поддержка браузера

* обозначает обязательный префикс.

  • Поддерживается:
  • Да
  • Нет
  • Частично
  • Polyfill

Статистика с caniuse.com

Автор Сара Суейдан. Последнее обновление: 11 декабря 2016 г., 22:55, автор: Мэри Лу.

У вас есть предложение, вопрос или вы хотите внести свой вклад? Отправить вопрос.

перенос слов · Документы WebPlatform

Сводка

Псевдоним css / properties / overflow-wrap, word-wrap определяет, следует ли прерывать слова, когда содержимое выходит за границы своего контейнера.

Обзорная таблица

Начальное значение
нормальный
Относится к
Все элементы
Унаследовано
Да
Медиа
визуал
Расчетное значение
указанное значение
Анимационный
Нет
Свойство объектной модели CSS
wordWrap

Синтаксис

  • перенос слов: разрыв слова
  • перенос слов: обычный

Значения

нормальный
По умолчанию.Строки могут быть разорваны только в обычных точках разрыва (пробелы, не буквенно-цифровые символы и т. Д.).
слово прерывания
Слова, превышающие ширину контейнера, будут произвольно разбиты, чтобы уместиться в границах контейнера.

Примеры

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

  .NormalValue {перенос слов: нормальный; цвет фона: светло-серый; }
.WithBreaks {перенос слов: слово-разрыв; цвет фона: светло-серый; }
.NormalValueNarrow {перенос слов: нормальный; цвет фона: светло-серый; width: 10px}
.WithBreaksNarrow {перенос слов: слово-разрыв; цвет фона: светло-серый; width: 10px}
.WithBreaksNoWrap {перенос слов: слово-разрыв; цвет фона: светло-серый; ширина: 10 пикселей; белое пространство: nowrap; }
.clsLiteral {семейство шрифтов: Courier New, Courier, моноширинный; }
  

Посмотреть живой пример

В следующих примерах показано, как свойство css / properties / word-wrap можно использовать для разбиения одного длинного слова на несколько слов в нескольких строках.Значение прерывания позволяет избежать горизонтальной прокрутки и может быть полезно при печати.

  


 свойство wordWrap 



свойство wordWrap

Обратите внимание , что элементы "p" в примерах имеют макет, потому что их ширина задана.

<час />

В этих примерах показано значение break-word свойства wordWrap .

LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord

блондинка

<час />

В этих примерах показано нормальное значение свойства wordWrap .В режиме причуд (переходный DOCTYPE) ширина поля увеличивается, чтобы соответствовать слову.

LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord

блондинка

<час />

В этих примерах показано значение break-word для wordWrap с white-space: nowrap .

Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово Длинное слово

блондинка

<час />

Чтобы обрезать развернутый текст по предоставленному пространству, вы можете использовать overflow: hidden и переполнение текста: многоточие .

LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord

LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord

<час />

Посмотреть живой пример

Банкноты

Замечания

Свойство переноса слов изначально было проприетарным свойством, разработанным для Internet Explorer, и используется в качестве синонима стандартизованного свойства переноса через переполнение .Это свойство позволяет браузеру разбивать в противном случае неразрывные строки (слова). Это отличается от свойства white-space , которое включает и выключает перенос текста. Свойство word-wrap указывает только, может ли перенос произойти в том месте в слове, которое иначе не разрешено действующими языковыми правилами.

Информация о стандартах

Связанные спецификации

Текстовый модуль CSS, уровень 3
Рекомендация W3C

Атрибуты

Как изменить обтекание текстом по умолчанию с помощью HTML и CSS

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

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

Помимо обертывания, браузеры также заботятся о пробелах ; они объединяют несколько последовательных пробелов в исходном коде в одно пространство на отображаемой странице, а также регистрируют принудительные разрывы строк перед началом работы над оберткой.

Читайте также: 15 красивых текстовых эффектов, созданных с помощью CSS

Когда менять обтекание текстом по умолчанию

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

Также может случиться так, что нам просто отчаянно нужно этих пробелов, сохраненных в нашем тексте , однако браузер продолжает объединять их в одно, заставляя нас добавлять несколько & nbsp; в исходном коде.

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

Существует достаточное количество свойств CSS (и элементов HTML!), Которые могут управлять переносом и точками останова , а также определять, как обрабатываются пробелы и разрывы строк перед переносом .

Возможности мягкой упаковки и разрывы мягкой упаковки

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

Самый простой способ усилить дополнительный разрыв можно сделать, используя старый добрый элемент
.

Пробел

Если вы знакомы со свойством CSS white-space , держу пари, вы впервые узнали его так же, как и многие другие; при поиске пути к предотвратить перенос текста .Значение nowrap из white-space делает именно это.

Однако свойство white-space — это больше, чем просто перенос. Прежде всего, что такое пробелы? Это наборов пробелов . Каждое пространство в наборе отличается друг от друга на по длине, направлению или и тем, и другим.

Типичный символ горизонтального пробела — это то, что мы добавляем, нажимая клавишу пробела. Клавиша Tab также добавляет аналогичного пробела, но с большей длиной .Клавиша Enter добавляет вертикальный интервал для начала новой строки и & nbsp; в HTML добавляет единственное неразрывное пространство на веб-страницы. Таким образом, существует множество типов пробелов, составляющих «пробелы».

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

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

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

¢ š˜ Привет. ¢ š˜ Привет. à ¢ š˜ Привет ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.
.textContainer {
  ширина: 500 пикселей;
  высота: 320 пикселей;
}
 

После применения white-space: nowrap; , обтекание текста меняется следующим образом:

.textContainer {
  / * ... * /
  белое пространство: nowrap;
}
 

Значение до пробелов сохраняет все пробелы и предотвращает перенос текста :

.textContainer {
  / * ... * /
  белое пространство: предварительно;
}
 

Предварительный перенос значение пробелов сохраняет все пробелы и переносит текст :

.textContainer {
  / * ... * /
  белое пространство: предварительная упаковка;
}
 

Наконец, значение перед строкой из пробелов сохраняет вертикальные пробелы , такие как новые строки, а обертывает текст :

.textContainer {
  / * ... * /
  пробел: предварительная строка;
}
 
Разрывы слов

Еще одно важное свойство CSS, которое вы должны знать для управления переносом текста, — это word-break . Вы можете видеть на всех приведенных выше снимках экрана, что браузер обернул текст перед словом «привет» с правой стороны, за пределами которого текст переполнился . Браузер не распознал слово .

Однако, если у вас нужно разрешить разбиение букв в слове , чтобы текст выглядел даже с правой стороны, вам нужно использовать значение break-all для свойства word-break :

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

Свойство разрыв слова имеет третье значение помимо разрыв всего и нормальный (принадлежащий к разрыву строки по умолчанию). Значение keep-all не позволяет разбивать слова .

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

Например, букв в корейских словах , изначально разорванных для переноса, сохраняются вместе , когда white-space: keep-all; правило указано.

 
ì „¸ê³„ à «¥ ¼ à–  ¥ à• Âœ ë Œ €  ™  », ¬ÂœÂ«  ‹ÂˆÃ¬Â½Â »«  «ÂœÃ« ¡œ à• ˜ì ‹Âì‹ œì˜¤. ¬Â Âœ10ÚŒ 유à «Â‹ ˆì½ »Ã«  «Âœ µÂ제 ڌ젘꠰  € 1997» «Â… „ 3젛» 10ì ¼à «Â¶Â € „  ° 12젼까짠€ à «Â Â… 젼젠˜ à «Â§ÂˆÃ¬Â ¸ì¦ˆì -  ¬Â„ Âœ ì — ´à «Â¦Â½Ã«  ‹ÂˆÃ«  ‹Â¤.¬Â§Â € ¸ˆ à «Â«  ± à «Â¡Â Ã • ˜ì‹ Â젋œì˜¤. ¬Â ´ šŒì ˜ì -  ¬Â „ϑ Š »Ã¬Â — Â… 계 ì  „ë  ° ˜ì ˜ ¬Â  „« ¬¸ê °  € à «Â« ¤ì ´  • ¨ê »Â˜ ë ª¨ì —В¬ à «Â‹ ¤ì Œê³¼ ê °  ™ ì  € «Â¶Â„ ¬Â • ¼à «¥ ¼ ë  ‹Â¤Ã«  £ ¹à «Â‹ ˆà «Â‹ ¤.
.textContainer {
  / * ... * /
  слово-разрыв: сохранить все;
}
 

В будущем это свойство может поддерживать другое значение, называемое break-word . Вы увидите, как работает прерывание позже, в разделе «Перенос переполнения» этой статьи.

Возможности разрыва слова

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

¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ H элло ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет. ¢ š˜ Привет.
.textContainer {
  / * ... * /
  белое пространство: предварительная упаковка;
}
 

Без все слово «Hello» было бы отображено в новой строке.Добавив в HTML-код, мы проинформировали браузер, что можно разбить слово в этом месте для переноса , если это необходимо.

Дефис

переносов CSS свойство — еще один способ управления разрывами между буквами в слове. Если вам интересно, у нас есть отдельная статья о расстановке переносов в CSS. Короче говоря, свойство позволяет создавать возможности переноса через перенос .

Его авто значение предлагает браузеру автоматически переносить и разбивать слова там, где это необходимо, при переносе.Значение manual заставляет браузеры переносить (при необходимости) при возможностях переноса, добавленных нами , таких как символ дефиса (& hyphen;) или & shy; (мягкий дефис). Если значение отсутствует , то не будет переноситься рядом с дефисами .

синий дом синий дом синий дом синий дом синий дом синий дом синий дом bluehouse bluehouse bluehouse голубой дом
.textContainer {
  / * ... * /
  -webkit-дефисы: авто;
  -ms-дефисы: авто;
  дефисы: авто;
}
 
Переливная пленка

Свойство CSS overflow-wrap контролирует, может ли браузер разбивать слова (или сохраненные пробелы, поддержка которых может появиться в ближайшем будущем) при переполнении . Когда значение прерывания задано для переполнения-переноса , слово будет разорвано в случае, если не будет найдено других возможностей мягкого переноса в строке.

Обратите внимание, что overflow-wrap также известен как word-wrap (это псевдонимы).

синийДомсинийДомсинийДом
.textContainer {
  / * ... * /
  переполнение-обертка: слово-прерывание;
}
 

Если в приведенном выше HTML-коде нет пробелов между буквами (т. Е. Нет возможности переноса), текст сначала не переносился, и сохранялся как одно слово .

Однако, когда было дано разрешение на перенос текста путем разрыва слов (т.е. значение break-word было присвоено overflow-wrap ), перенос происходил путем разрыва всей строки там, где это было необходимо.

Читайте также: Работа с текстом в масштабируемой векторной графике (SVG)

CSS word-wrap Свойство

Свойство word-wrap разбивает строки на слова, чтобы они уместились в своем контейнере. Это свойство разбивает даже слова, которые нельзя сломать.

Это свойство может иметь положительное или отрицательное значение. Положительное значение добавляет дополнительный пробел между словами, тогда как отрицательное значение удаляет пробел между словами. Когда установлено значение «normal», указанный шрифт будет определять расстояние между словами.

Свойство переноса слов является одним из свойств CSS3.

Он действует только тогда, когда свойство white-space разрешает перенос.

Синтаксис¶

  перенос слов: нормальный | слово-разрыв | начальная | наследовать;  

Пример свойства переноса слов с «нормальным» значением: ¶

  

  
     Название документа 
    <стиль>
      div {
        ширина: 120 пикселей;
        граница: 1px solid # 666;
        перенос слов: нормальный;
      }
    
  
  
    

Пример свойства переноса слов

Lorem Ipsum - это простопростопростопростопросто фиктивный текст печати и верстки industryindustryindustryindustryindustry .
Попробуйте сами »

Результат¶

Пример свойства переноса слов со значением« break-word »: ¶

  

  
     Название документа 
    <стиль>
      div {
        ширина: 120 пикселей;
        граница: 1px solid # 666;
        перенос слов: слово-пауза;
      }
    
  
  
    

Пример свойства переноса слов

Lorem Ipsum - это простопростопростопростопросто фиктивный текст печати и верстки industryindustryindustryindustryindustry .