Содержание

word-wrap | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+10.5+1.0+3.5+1.0+1.0+

Краткая информация

Значение по умолчаниюnormal
НаследуетсяДа
ПрименяетсяКо всем элементам
Процентная записьНеприменима
Ссылка на спецификациюhttp://www.w3.org/TR/css3-text/#word-wrap

Версии CSS

Описание

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

Синтаксис

word-wrap: normal | break-word | inherit

Значения

normal
Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью тега <br>).
break-word
Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>word-wrap</title>
  <style>
   .col { 
    background: #f0f0f0; /* Цвет фона */
    width: 230px; /* Ширина блока */
    padding: 10px; /* Поля */
    font-size: 1.5em; /* Размер шрифта */
    word-wrap: break-word; /* Перенос слов */ 
   }
  </style>
 </head>
 <body> 
  <div>
   <p>Cуществительное</p>
   <p>высокопревосходительство</p>
   <p>Одушевленное существительное</p>
   <p>одиннадцатиклассница</p>
   <p>Химическое вещество</p>
   <p>метоксихлордиэтиламинометилбутиламиноакридин</p>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Перенос длинных слов

Где всё сложно с переносами строк. Вот все CSS- и HTML-хитрости для этого — CSS-LIVE

Перевод статьи Where Lines Break is Complicated. Here’s all the Related CSS and HTML. с сайта css-tricks.com для CSS-live.ru, автор — Крис Койер

Скажем, есть действительно длинное слово в каком-то тексте, у контейнера которого недостаточно ширины для него. Типичная причина этого — длинный URL, просочившийся в текст. Что происходит? Зависит от CSS. Как этот CSS управляет раскладкой и как он этим текстом распоряжается.

Вот как может выглядеть ситуация с не поместившимся текстом:

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

Первое решение — overflow: hidden;, как этакий «лобовой» прием, чтобы не дать тексту (и чему угодно) высовываться. Но от этого пострадает доступность текста. В некоторых десктопных браузерах для выделения текста можно три раза кликнуть на нем мышью, но не каждый может об этом знать и не всегда такое возможно.

Название свойства «overflow» — «переполнение» — здесь весьма к месту, ведь именно оно, переполнение, у нас и происходит. Ещё есть overflow: auto;, приводящее к горизонтальному скроллу. Иногда может и подойди, но наверняка вы тоже согласитесь, что обычно это решение неприемлемо.

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

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

Здесь я взял блок с содержимым, размер которого можно менять, и решил соединить его с разными CSS-свойствами и их значениями, которые можно включать/выключать, чтобы увидеть, как это влияет на содержимое.

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

See the Pen Figuring Out Line Wrapping by Максим (@psywalker) on CodePen.

Кувалда: word-break: break-all;

Позволяет словам разрываться везде. Свойство word-break «решает» проблему:


p {
word-break: break-all;
}

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

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

Прицельное решение:

overflow-wrap: break-word;

Свойство overflow-wrap кажется наиболее эффективным решением для данной проблемы.


p {
  word-wrap: break-word; /* old name */
  overflow-wrap: break-word;
}

На первый взгляд это может походить на демо с word-break: break-all; выше, но заметьте, как в URL оно не разрывает «pen» как «pe\n», а делает перенос в конце этого слова, рядом со слешем.

fantasai объясняет:

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

Решение потяжелее, иногда:

hyphens: auto;

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


p {
hyphens: auto;
}

fantasai сказала мне:

Если «слово» находится в конце строки, его можно переносить через дефис.

Думаю, это «слово» в кавычках дает подсказку, в чем тут проблема. Некоторые неприемлемо длинные строки — не «слова», поэтому это решение — не панацея.

Будущая кувалда:

line-break: anywhere;

Есть свойство line-break. В основном, кажется оно для пунктуации, но ни в одном браузере оно у меня не заработало. fantasai сказала мне, что появится новое значение

anywhere, которое:

«как word-break: break-all;» за исключением того, что она на самом деле разрывает всё, как примитивная программа на терминале.

Другие решения в HTML

Элемент <br> разобъёт строку где угодно, если только у него не будет display:none.

Элемент <wbr> — «возможный разрыв слова», что означает, что длинному слову, обычно вызывающему раздражающую проблему с переполнением можно сказать, чтобы оно разорвалось в конкретном месте. Полезно! Оно ведёт себя, как пробел нулевой ширины.

Другие решения на CSS

Символ ­&shy; делает то же самое, что и элемент <wbr> (На самом деле не совсем, поскольку, в отличие от <wbr>, ­ добавляет дефисы при переносе. — прим. перев.)

Можете вставить разрыв строки с помощью псевдоэлемента ::before { content: "\A"; }, если только элемент не строчный (в противном случае потребуется white-space: pre;)

P.S. Это тоже может быть интересно:

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

Перенос длинных слов

Проблема переноса длинных слов встречается не так редко, как может показаться. Если не брать во внимание слова-рекордсмены вроде “метилпропенилендигидроксициннаменилакрилической кислоты”, порой в установленные макетом страницы рамки не умещаются менее экзотические слова.

Браузеры по умолчанию не разбивают длинные слова на несколько строк. Перенос на новую строку происходит только там, где стоит дефис, пробел или Enter (исключение составляют неразрывный пробел &nbsp; и неразрывный дефис &#8209;). При некоторых условиях может появиться ползунок горизонтальной прокрутки, но чаще всего слово выйдёт за границы отведённого ему блока.

Немного иначе ведут себя flexbox элементы и таблицы, они игнорируют установленную ширину и всегда растягиваются настолько, чтобы вместить текст целиком. В примере ниже flex-контейнеру было задано ограничение по ширине (width: 300px;), однако видно, что в зависимости от контента блок может занимать больше места. Не самая приятная особенность для верстальщика, уверенного, что в его макете всё рассчитано до пикселя.

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

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

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

В HTML5 появился тег <wbr/>

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

<html>
  <head>
    <style>
      .card {
        width: 200px;
        height: 250px;
        background: #7cd4ae;
        padding: 10px;
        display: inline-block;
        margin: 2em;
      }
    </style>
  </head>

  <body>
    <div>
      <img src="troll.jpg">
      Двухсот&shy;восьмидесяти&shy;восьми&shy;киллограммовый тролль
    </div>
    <div>
      <img src="troll.jpg">
      Двухсот<wbr/>восьмидесяти<wbr/>восьми<wbr/>киллограммовый тролль
    </div>
  </body>
</html>

 

 

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

В CSS есть несколько свойств, влияющих на перенос текста.

  • overflow-wrap (word-wrap) — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-word — принудительно переносить).
  • word-break — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-all — принудительно переносить, keep-all — не переносить, даже если слово содержит дефис).
  • hyphens — автоматический перенос слов, основанный на встроенном в браузер словаре переносов (none — не переносить, auto — переносить длинные слова).

Название word-wrap является устаревшим, но сохраняется для совместимости со старыми версиями браузеров.

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

Свойство hyphens является наиболее мощным и удобным, но его поддержка браузерами пока не идеальна. Плюс оно требует обязательного указания языка в атрибуте lang тега (например, lang=»ru»).

<html>
  <head>
    <style>
      .description {
        width: 100px;
        background: #7cd4ae;
        word-wrap: break-word;
        word-break: break-all; /* более приоритетно */
      }
    </style>
  </head>

  <body>
    <div lang="ru">
      Верховный суд Лос-Анджелеса решит судьбу огромнейшего трёхсотвосьмидесятикилограммового изумруда
    </div>
  </body>
</html>

 

<h3>Перенос длинных слов</h3> <p>Проблема переноса длинных слов встречается не так редко, как может показаться. Если не брать во внимание слова-рекордсмены вроде “метилпропенилендигидроксициннаменилакрилической кислоты”, порой в установленные макетом страницы рамки не умещаются менее экзотические слова.</p> <p>Браузеры по умолчанию не разбивают длинные слова на несколько строк. Перенос на новую строку происходит только там, где стоит дефис, пробел или Enter (исключение составляют неразрывный пробел &amp;nbsp; и неразрывный дефис &amp;#8209;). При некоторых условиях может появиться ползунок горизонтальной прокрутки, но чаще всего слово выйдёт за границы отведённого ему блока.</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+1.png/78167a41-190d-4fa6-ad42-94edb58ce6df?t=1546978623888″ /></p> <p>Немного иначе ведут себя flexbox элементы и таблицы, они игнорируют установленную ширину и всегда растягиваются настолько, чтобы вместить текст целиком. В примере ниже flex-контейнеру было задано ограничение по ширине (width: 300px;), однако видно, что в зависимости от контента блок может занимать больше места. Не самая приятная особенность для верстальщика, уверенного, что в его макете всё рассчитано до пикселя.</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+2.png/00d36fc9-bfa7-45e8-ad39-2ab9012e3abc?t=1546978630901″ /></p> <h4>Перенос слов средствами HTML</h4> <p>Как говорилось выше, по умолчанию браузер не переносит слова на несколько строк. Отчасти потому, что он может не знать, как это сделать грамотно.</p> <p>Указать браузеру, в каких местах слово может быть разбито переносом можно с помощью <strong>символа мягкого разрыва</strong> (<code>&amp;shy;</code>). Переносы будут добавлены только там и тогда, когда это необходимо, чтобы слово поместилось в контейнер.</p> <p>В HTML5 появился тег <strong>&lt;wbr/&gt;</strong>, обладающий схожим эффектом, однако он не добавляет символ переноса в месте разрыва слова, что выглядит уже не так красиво.</p> <pre> &lt;html&gt; &lt;head&gt; &lt;style&gt; .card { width: 200px; height: 250px; background: #7cd4ae; padding: 10px; display: inline-block; margin: 2em; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;img src=»troll.jpg»&gt; Двухсот&amp;shy;восьмидесяти&amp;shy;восьми&amp;shy;киллограммовый тролль &lt;/div&gt; &lt;div&gt; &lt;img src=»troll.jpg»&gt; Двухсот&lt;wbr/&gt;восьмидесяти&lt;wbr/&gt;восьми&lt;wbr/&gt;киллограммовый тролль &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p>&nbsp;</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+3.png/04451e1d-9f02-48c5-8f66-b18ac5d042e8?t=1546979243873″ /></p> <p>&nbsp;</p> <h4>Перенос слов средствами CSS</h4> <p>В CSS есть несколько свойств, влияющих на перенос текста.</p> <ul> <li>overflow-wrap (word-wrap) — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-word — принудительно переносить).</li> <li>word-break — управляет переносом длинных слов (normal — не переносить, если перенос не задан явно, break-all — принудительно переносить, keep-all — не переносить, даже если слово содержит дефис).</li> <li>hyphens — автоматический перенос слов, основанный на встроенном в браузер словаре переносов (none — не переносить, auto — переносить длинные слова).</li> </ul> <p>Название word-wrap является устаревшим, но сохраняется для совместимости со старыми версиями браузеров.</p> <p>Свойства word-wrap и word-break на первый взгляд делают одно и то же, но есть небольшие отличия. Word-wrap считается более общим, тогда как word-break предусматривает специальное поведение для китайского, японского и корейского языков. Word-wrap начинает не поместившееся слово с новой строки, а word-break нет. Однако word-break является более приоритетным по отношению к word-wrap.</p> <p>Свойство hyphens является наиболее мощным и удобным, но его поддержка браузерами пока не идеальна. Плюс оно требует обязательного указания языка в атрибуте lang тега (например, lang=»ru»).</p> <pre> &lt;html&gt; &lt;head&gt; &lt;style&gt; .description { width: 100px; background: #7cd4ae; word-wrap: break-word; word-break: break-all; /* более приоритетно */ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div lang=»ru»&gt; Верховный суд Лос-Анджелеса решит судьбу огромнейшего трёхсотвосьмидесятикилограммового изумруда &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p>&nbsp;</p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+4.png/eeaafee6-6067-4be4-92db-fd8c5b910a93?t=1546979251721″ /></p> <div><textarea name=»blogs-entry-content-2103008_original»></textarea></div> <script type=»text/javascript»>CKEDITOR.disableAutoInline=true;CKEDITOR.env.isCompatible=true;</script>

Проблемы с переносом слов | CSS

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

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

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

Давайте бегло рассмотрим основные свойства.

word-wrap/overflow-wrap

Свойство word-wrap принимает два значения: normal (по умолчанию) и break-word. Это не считая трех глобальных значений: inherit, initial и unset.

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

В первом примере показано поведение по умолчанию для таких случаев:

Посмотреть демо-версию

Второй пример этой демо-версии иллюстрирует действие свойства overflow-wrap: break-word, которое указывает браузеру разрывать слово, когда оно выходит за пределы контейнера.

Важно отметить: в текущей версии спецификации по текстам CSS3 свойство word-wrap было заменено на overflow-wrap, которое принимает те же значения. Здесь вы найдете обзор поддержки браузерами этого нового свойства.

word-break

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

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

hyphens

Свойство hyphens указывает браузеру, как обрабатывать переносы слов с добавлением дефисов. Оно принимает следующие значения: none, manual и auto. Это свойство на данный момент поддерживается браузерами не полностью, поэтому будет работать нормально только в Firefox.

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

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

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

Тег &shy; задает мягкий CSS перенос текста на новую строку – он указывает разрыв слова, если это необходимо, но дефис на экране отображается только, если слово переносится.

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

white-space

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

Свойство принимает пять значений: normal (по умолчанию), nowrap, pre, pre-wrap и pre-line.

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

Посмотреть демо-версию

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

Значение nowrap (пример 2) также не воспринимает дополнительные пробелы, но в отличие от normal строки текста не переносятся в соответствии с размерами контейнера.

pre поддерживает дополнительное пробелы в разметке и не разрывает строки при выходе за пределы контейнера, как показано в примере 3.

Пример 4, pre-wrap не объединяет пустые пространства, но переносит строки при выходе за пределы контейнера.

Значение pre-line объединяет пробелы (за исключением символов перехода на новую строку) и разрывают текст, чтобы он соответствовал границам контейнера, как показано в последнем примере.

По умолчанию блоки кода оборачиваются в теги pre и не переносятся. Это может привести к большой путанице.

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

Убедитесь, что все установленные значения white-space не приводят к объединению пустых пространств и пробелов, иначе это нарушит синтаксис кода.

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

CSS text-overflow: ellipsis является неудобным. Оно требует добавления большого количества кода, так как работает только в сочетании с кучей других свойств. Кроме этого, оно действует только на одну строку текста, что делает его еще более неудобным.
Есть JQuery-плагин, dotdotdot, который создает многоточие. С его помощью можно добавить даже ссылку в конце для продолжения чтения.

Вот пример его применения:

Посмотреть пример

Иногда нужно, чтобы слова разрывались, но только в очень специфических местах. Это делает все еще сложнее. Как нам сообщить браузеру, что в этих местах нужно добавлять CSS перенос текста?

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

Hey what did you do this we&shy;ekend? I painted some pottery, it was p neat.

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

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

Применив overflow-wrap: break-word к ссылке, вы зададите разрыв URL-адреса при ее выходе за пределы контейнера, хотя это свойство поддерживается не во всех браузерах.

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

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

Данная публикация является переводом статьи «Word Wrapping Woes» , подготовленная редакцией проекта.

Свойство overflow-wrap- перенос длинного слова на новую строку

Свойство overflow-wrap позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера.

Синтаксис

селектор { overflow-wrap: break-word | normal; }

Значения

ЗначениеОписание
break-word Заставляет длинные слова переносится на новую строку, если это слово не помещается в контейнер. При этом слово начнется с новой строки.
normal Стандартное поведение: если длинное слово не влазит по ширине в контейнер — оно просто вылезет за его границу (при этом начнется с новой строки).

Значение по умолчанию: normal.

Пример . Значение normal

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div> #elem { word-wrap: normal; overflow-wrap: normal; border: 1px solid red; width: 200px; }

:

Пример . Значение break-word

А теперь те буквы, которые не помещались, просто перенесутся на следующую строку (при этом длинное слово все равно будет начинаться с новой строки):

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div> #elem { overflow-wrap: break-word; border: 1px solid red; width: 200px; }

:

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

  • свойство word-break,
    которое также позволяет перенести буквы длинного слова на новую строку
  • свойство word-wrap,
    которое является устаревшим названием свойства overflow-wrap
  • свойство hyphens,
    которое включает переносы слов по слогам
  • тег wbr,
    который реализует мягкие переносы средствами HTML
  • тег br,
    с помощью которого можно принудительно заставить перенести текст на новую строку

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

Всем привет и приступим. Допустим у нас есть следующий текст: 

<p>
        Правительство Объединенных Арабских Эмиратов и администрация концентрируют в этом
        городе все самые новые технологии, основанные на последних достижениях науки и техники,
        пытаясь превратить его город будущего, словно сошедший с экрана какого-нибудь
        научно-фантастического фильма. К этим технологиям можно отнести роботов-полицейских,
        автомобили-роботы и транспортную систему Hyperloop, а в недалеком будущем в Дубайе
        начнет функционировать служба автоматических летающих такси. И в рамках подготовки к
        этому событию электрический двухместный летательный аппарат Volocopter с 18 роторами,
        который и будет использоваться в качестве такси, совершил первый полет в автоматическом
        режиме, пишут...
    </p>

здесь у нас указан некий текст с которым мы сейчас начнем работать.

И первое свойство которое мы с вами рассмотрим называется word-break

word-break: normal | keep-all | break-all

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

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

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

К счастью есть аналогичное свойство которое переносит только не влезающие слова по символам. Называется оно overflow-wrap: 

p{
overflow-wrap: break-word;
}

и после применения значения break-word, весь наш текст переносится по словам, а слова которые не влезают в заданную ширину переносятся посимвольно. Можно сказать задача выполнена! Помимо значения break-word данное свойство принимает:

overflow-wrap: normal | break-word | inherit;

Теперь давайте перейдем к более продвинутому свойству css для переноса слов в тексте.

Рассмотрим свойство white-space c помощью которого мы можем имитировать работу тега pre не меняя сам текст на моноширный.

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

По сути с помощью данного свойства мы работает только с пробелами в тексте. К примеру если мы применим следующий стиль к нашему тексту: 

white-space: nowrap;

все переносы строк у нас будут проигнорированы и наш текст отобразиться в виде одной строки. 

white-space: pre;

В случае значения pre все переносы строк будут аналогичны переносам в исходном коде. Причем если текст не будет помещаться в заданную ширину, то он переносится не будет. Если мы хотим чтобы он переносился, то нам нужно указать значение pre-line.

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

white-space: pre-wrap;

Вот в принципе и все что я хотел вам рассказать про переносы слов средствами css. Надеюсь данная статья была для вас полезна и вы не раз еще воспользуетесь полученными знаниями.

Ну а я же с вами прощаюсь. Желаю успехов и удачи! Пока!

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

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



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

Например, он (очень неприятно) перекрывает дивы, заставляет горизонтальную прокрутку и т. д. wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

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

css string long-integer word-wrap
Поделиться Источник Peter Craig     13 мая 2009 в 06:05

10 ответов

  • Как я могу переключить перенос слов в Visual Studio?

    Есть ли у Visual Studio .NET способ включать и выключать перенос слов? Я привык к этой функции в Eclipse, которая позволяет вам щелкать правой кнопкой мыши и включать и выключать перенос слов, так что, когда у вас длинные строки, которые простираются вправо, вам не нужно перемещать нижнюю полосу…

  • Самый простой способ создать перенос слов из строки в swift

    Каков самый простой способ создать перенос слов в Swift из строки? Допустим, у меня есть строка из 150 символов, и я хочу начать новую строку каждые 50 символов. Ваши мысли очень ценятся.


87

Этот вопрос уже задавался здесь раньше:

Короче говоря:

Что касается решений CSS, у вас есть: overflow: scroll; , чтобы заставить элемент показывать полосы прокрутки, и overflow:hidden; , чтобы просто отрезать любой дополнительный текст. Есть text-overflow:ellipsis; и word-wrap: break-word; , но они только IE ( break-word находится в проекте CSS3, однако, так что это будет решением этой проблемы через 5 лет).

Суть в том, что если для вас очень важно предотвратить это с переносом текста на следующую строку, единственным разумным решением является введение &shy; (мягкий дефис), <wbr> (тег разрыва слова) или &#8203; (пробел нулевой ширины, тот же эффект, что и &shy; минус дефис) на стороне сервера строк. Однако, если вы не возражаете против Javascript, есть дефис , который кажется довольно солидным.

Поделиться Paolo Bergantino     13 мая 2009 в 06:09


31

word-wrap: break-word; доступен в браузерах с поддержкой IE7+, FF 3.5 и Webkit (Safari/Chrome и т. Д.). Для обработки IE6 вам также нужно будет объявить word-wrap: break-all;

Если FF 2.0 нет в матрице вашего браузера, то их использование является жизнеспособным решением. К сожалению, он не переносит предыдущую строку, где слово сломано, что является типографским кошмаром. Я бы предложил использовать дефис, как предложил Паоло, который является ненавязчивым JavaScript. Резервным вариантом для пользователей, не включенных в JavaScript, будет сломанное слово без дефисов. Я могу жить с этим какое-то время. Эта проблема, скорее всего, возникнет в CMS, где веб-дизайнер не имеет контроля над тем, какой контент будет вводиться или где могут быть реализованы разрывы строк и мягкие дефисы.

Я взглянул на спецификацию W3 , где обсуждается перенос в CSS3. К сожалению, похоже, что есть несколько предложений, но пока ничего конкретного. Похоже, что поставщики браузеров еще ничего не реализовали. Я проверил как Mozilla, так и Webkit на наличие кода владельца, но никаких признаков этого нет.

Поделиться Kevin Rapley     15 декабря 2009 в 07:28


28

word-break:break-all работает лакомство

Поделиться Sam Jones     19 июля 2013 в 15:47

  • Контекстно-зависимый перенос слов в vi/vim

    Как я могу конкретизировать перенос слов для конкретных тегов. Например, в LaTex я хочу переносить слова для моих абзацев, но не для моих фигурных команд (они всегда очень длинные и бегут за пределы экрана). Или с Javascript, я хочу, чтобы правое поле для кода было, например, 50 столбцов, но для…

  • Перенос слов в Eclipse Java?

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


11

Только что упомянул об этом здесь , но, вероятно, более уместно для этого вопроса. Лучшим свойством в ближайшее время будет переполнение. и лучшее значение, если оно будет реализовано, будет:

* {
   overflow-wrap:hyphenate. 
}

На момент написания статьи iphone или firefox, похоже, еще не было никакой поддержки, а overflow-wrap:hyphenate даже нет в рабочем проекте.

в то же время я бы использовал:

p {
    word-wrap: break-word;
    -moz-hyphens:auto; 
    -webkit-hyphens:auto; 
    -o-hyphens:auto; 
    hyphens:auto; 
}

Поделиться adriatiq     27 апреля 2012 в 02:37


3

display: block;
overflow: hidden;
text-overflow: ellipsis;
width: 200px; // or whatever is best for you

Поделиться jamiethepiper     25 марта 2013 в 16:06


3

Я использую код для предотвращения всех длинных строк, URL-адресов и так далее..

 -ms-word-break: break-all;

/* Be VERY careful with this, breaks normal words wh_erever */
     word-break: break-all;

/* Non standard for webkit */
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Поделиться Roman Losev     14 февраля 2014 в 07:21

Поделиться Chad Birch     13 мая 2009 в 06:19


1

Обычно клетки делают это естественным образом, но вы можете заставить это поведение на div с помощью:

div {
  width: 950px;
  word-wrap: break-word;
  display: table-cell;
}

Поделиться nikc     02 января 2013 в 01:55


0

Всегда указывайте свойство высоты строки-если вы его не укажете, это может привести к сбою вашего свойства word-break: break-all; .

Поделиться Shraddha Mohite     20 ноября 2014 в 11:16


0

Похоже, что это делает трюк для последней версии Chrome:

[the element],
[the element] * {
  word-wrap: break-word;
  white-space: pre;
}

Я не проверял ни один браузер, кроме Chrome.

Поделиться SDMulroy     01 декабря 2014 в 16:46

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


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

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


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

Я использую gedit & у меня очень огромная строка, и я не могу видеть эту полную строку, потому что gedit застревает. Итак, я хотел сделать перенос слов в gedit. Я искал, но не нашел опции…


Div переполняется не делая отдельной строки

Возможный Дубликат : перенос слов очень длинные строки Мой код <div style=width:40px;>adfdddddddddddddddddddd</div> Этот код должен составлять 4 строки, но он отображает вывод в одной…


Как я могу переключить перенос слов в Visual Studio?

Есть ли у Visual Studio .NET способ включать и выключать перенос слов? Я привык к этой функции в Eclipse, которая позволяет вам щелкать правой кнопкой мыши и включать и выключать перенос слов, так…


Самый простой способ создать перенос слов из строки в swift

Каков самый простой способ создать перенос слов в Swift из строки? Допустим, у меня есть строка из 150 символов, и я хочу начать новую строку каждые 50 символов. Ваши мысли очень ценятся.


Контекстно-зависимый перенос слов в vi/vim

Как я могу конкретизировать перенос слов для конкретных тегов. Например, в LaTex я хочу переносить слова для моих абзацев, но не для моих фигурных команд (они всегда очень длинные и бегут за пределы…


Перенос слов в Eclipse Java?

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


Перенос слов в JasperReport с тегом html

Я пытаюсь разработать отчет с некоторым текстом, но у меня есть одно текстовое поле problem…In, которое я написал I text и использую тег <br> </br> . Если бы я написал один текст с…


Визуальный перенос слов или перенос слов в файле

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


UILabel неправильный перенос слов в iOS 11

У меня есть проблема с приложением, использующим XIBs без autolayout. Не знаю, важна ли эта информация. У меня есть UILabel с 2 строками, использующими перенос слов. В iOS 10 перенос слов работал…

разрыв строки — CSS: каскадные таблицы стилей

Свойство line-break CSS устанавливает, как разбивать строки китайского, японского или корейского (CJK) текста при работе с пунктуацией и символами.

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


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

Значения

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

Существует возможность мягкого переноса вокруг каждой единицы типографского символа, в том числе вокруг любого символа пунктуации или сохраненных пробелов, или в середине слов, игнорируя любые запреты на перенос строки, даже те, которые вводятся символами с GL, WJ или ZWJ класс символов или предписывается свойством разбиения по словам .Не следует отдавать приоритет различным возможностям упаковки. Переносы не применяются.

 авто | свободный | нормальный | строгий | в любом месте

Настройка переноса текста

Посмотрите, переносится ли текст перед «々», «ぁ» и «。».

HTML 
  

  
 авто: 
 そ こ は 湖 の ほ と り 々 が 輝 い て い た 
 の 景色 に 、 美 し ぁ 思 わ ず つ ぶ や い た。 

  
 свободно: 
 そ こ は 湖 の ほ と り 々 が 輝 い て い た 
 そ の 景色 に 、 美 し ぁ 思 わ ず つ ぶ い た。 

  
 нормальный: 
 そ こ は 湖 の ほ と り で 々 が 輝 い て い た 
 の 景色 に 、 美 し い な 思 わ ず つ ぶ や い た。 

  
 строгий: 
 そ こ は 湖 の ほ と り 木 々 が 輝 い て い た 
 そ の 景色 に 、 美 し い ぁ と 思 わ ず つ ぶ い た。 

  
 в любом месте: 
 そ こ は 湖 の ほ と り 々 が 輝 い て い た。 
 の 景色 に 、 美 し い ぁ 思 わ ず つ ぶ い た。
CSS 
 .wrapbox {width: 10em; маржа: 0,5em; пробел: нормальный; вертикальное выравнивание: сверху; дисплей: встроенный блок; }
.auto {разрыв строки: авто; }
.loose {разрыв строки: свободный; }
.normal {разрыв строки: нормальный; }
.strict {разрыв строки: строгий; }
.anywhere {разрыв строки: где угодно; }
Результат

таблицы BCD загружаются только в браузере

html — Как перенести строку из css без использования?

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

Вот пример, предполагающий оглавление:

  


     Элемент A1   Элемент A2 
     Элемент B1   Элемент B2

А вот метод Simon_Weaver, он проще и совместимее.Он не так сильно разделяет стиль и контент, требует больше кода, и могут быть случаи, когда вы захотите добавить перерывы постфактум. Тем не менее, это отличное решение, особенно для более старого IE.

  


     Элемент A1  
  Элемент A2  

     Элемент B1  
  Элемент B2

Обратите внимание на преимущества вышеуказанных решений:

  • Независимо от пробелов в HTML, результат будет одинаковым (vs. до )
  • К элементам не добавляется никаких дополнительных отступов (см. Дисплей NickG : блок комментариев)
  • Вы можете легко переключаться между горизонтальным и вертикальным списками ссылок с помощью некоторого общего CSS, не заходя в каждый файл HTML для изменения стиля.
  • Нет float или очистить стилей, влияющих на окружающий контент
  • Стиль отделен от содержимого (по сравнению с
    или до с жестко заданными разрывами)
  • Это также может работать для свободных ссылок с использованием a.toc: после и
  • Вы можете добавить несколько разрывов и даже текст префикса / суффикса

css — укажите разрыв строки для адаптивного дизайна

css — укажите разрыв строки для адаптивного дизайна — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 26к раз

Я не могу найти, как указать, в какой момент строка должна разрываться, если экран недостаточно велик.Например, я бы хотел, чтобы текст «Commune: CENON-SUR-VIENNE» прерывался после символа двоеточия. Есть ли синтаксис, позволяющий указать это вручную вместо того, чтобы оставлять Bootstrap CSS делать это автоматически?

Я включаю часть своего HTML-кода ниже. Я правильно указал метатег внутри :

Скриншот:

HTML код:

  

  

    

      

         
 Коммуна: СЕНОН-СЮР-ВЕНА
Роб

13.4k2626 золотых знаков4040 серебряных знаков6060 бронзовых знаков

Создан 13 июн.

вилтомап

2,84177 золотых знаков2727 серебряных знаков5151 бронзовый знак

, вы можете попробовать это.https://jsfiddle.net/5vwh56f8/1/

Помещение второго слова в диапазон и добавление встроенного блока стиля.

  





  

   
 Коммуна: 
CENON-SUR-VIENNE  
  








<стиль>
h5 span {
дисплей: встроенный блок;
}