Содержание

Свойство 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,
    с помощью которого можно принудительно заставить перенести текст на новую строку

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



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

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

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

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

10 ответов


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

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

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

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



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 столбцов, но для…

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

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



10

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

* {
   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

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

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

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

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



0

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

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


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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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

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. Надеюсь данная статья была для вас полезна и вы не раз еще воспользуетесь полученными знаниями.

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

Css перенос букв на новую строку. Переносы слов

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

Дефис

Первое решение для переноса длинных слов – с помощью дефиса.

Defisi { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

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

Обрыв слова

Обрыв слова – это свойство CSS, указывающее на то, следует ли разрывать строки внутри слов.

Obriv-slova { -ms-word-break: break-all; word-break: break-all; word-break: break-word; }

Поддержка браузерами: Обрыв слов поддерживается во всех браузерах, за исключением Opera Mini и старых версий Opera.

Обертка переполнения

Следующее решение – это использование Обертки переполнения (overflow-wrap).

Obertka-perepolneniya { word-wrap: break-word; overflow-wrap: break-word; }

Поддержка браузерами: поддерживается практически во всех браузерах. Примечание: Некоторые браузеры требуют использования «word-wrap» вместо «overflow-wrap».

Многоточие

Еще один вариант – использование многоточий.

Mnogotochiye { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

Поддержка браузерами: поддерживается всеми современными браузерами.

Это работающий метод, но далеко не идеальный.

Финальное решение: Использование Обертки переполнения и дефиса.

Finalnoye-resheniye { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

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

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

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован
 пользователем. Таким образом, white-space
 имитирует
 работу тега 
Но в отличие от него не меняет шрифт
 на моноширинный.

Синтаксис

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

Значения

normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.

Действие значений на текст представлено в табл. 1.

HTML5 CSS2.1 IE Cr Op Sa Fx

white-space

Пример

Великая теорема Ферма
X n + Y n = Z n
где n - целое число > 2

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

Рис. 1. Применение свойства white-space

Объектная модель

document.getElementById("elementID ").style.whiteSpace

Браузеры

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для

Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .

Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal , nowrap , и pre воспринимаются как pre-wrap .

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

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

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

И первое свойство которое мы с вами рассмотрим называется 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. Надеюсь данная статья была для вас полезна и вы не раз еще воспользуетесь полученными знаниями.

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

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

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

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. {1,4}
# Повторять один или больше раз через запятую. #
×

Значения

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

Пример

word-wrap

Cуществительное

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

Одушевленное существительное

одиннадцатиклассница

Химическое вещество

метоксихлордиэтиламинометилбутиламиноакридин

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

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

Объектная модель

Объект .style.wordWrap

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor»s draft (Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации ) — первая черновая версия стандарта.
×

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

Свойство word-wrap

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

Проверка перенова слов

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

Первое свойство, к которому стоит обратиться для обработки текста, — это word-wrap. Принимает три значения: normal, break-all и keep-all. Вам для работы понадобится запомнить только break-all. Normal стоит по умолчанию, и его нет смысла указывать. Keep-all означает в документе CSS запрет переноса строки. Разработано специально для китайских, японских и корейских иероглифов. Поэтому, если вы не собираетесь вести блог на каком-то из этих языков, свойство вам не пригодится. А также оно не поддерживается браузером Safari и мобильными телефонами на базе iOS.

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

P{ font: bold 30px Helvetica, sans-serif; width: 25px; word-wrap: break-all; }

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

Свойство white-space

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

В документе CSS перенос строки, назначенный с помощью свойства white-space, можно настроить так, чтобы он осуществлялся с учетом пробелов или нажатия клавиши «Ввод». White-space со значением pre-line заставит браузер видеть в тексте Enter.

Проверка перенова слов

Если поменять pre-line на pre-wrap в коде CSS, перенос строки произойдет с учетом пробелов. И наоборот, запретить любой перенос, присвоив тексту свойство white-space со значением nowrap:

#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; white-space: nowrap; }

Text-overflow

Еще один полезный инструмент для работы с текстом — это text-overflow. Помимо переноса строки, CSS-свойство позволяет обрезать контент, когда контейнер переполнен. Принимает два значения:

  • clip — просто обрезает текст;
  • ellipsis — добавляет многоточие.
#wrapper p{ color: #FFF; padding: 10px; font: bold 16px Helvetica, sans-serif; text-overflow: ellipsis;/*Добавляем многоточие*/ white-space: nowrap; /* Запрещаем перенос строк */ overflow: hidden;/*Прячем все что выходит за рамки контейнера*/ }

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

Перенос длинных слов с помощью CSS. Переносы слов в HTML Css перенос длинных слов

Автоматический топорный перенос слов (без добавление дефисов).

Интересуемые значения свойства:

  • break-all
    Автоматический перенос всех слов, текст выглядик как выровненный по ширине.
  • break-word (используется на этом сайте в заголовках)
    Перенос отдельных слов, которые не поместилось в заданную ширину блока.

Светлое будущее. СSS cвойство hyphens

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

Интересуемые значения:

  • manual (используется по умолчанию)
    Слова переносятся только в тех местах текста, где добавлен спецсимвол &shy (мягкий перенос) или тег . Спецсимволы вручную расставляются в тексте, не видны в обычном тексте и если слово не помещается, браузер в месте нахождения спецсимвола создаёт перенос. Спецсимвол &shy при переносе слова добавлять дефис (как учили в школе), а тег нет.
  • auto
    Браузер добавляет переносы автоматически на основе встроенного словаря. До сих пор слабая поддержка браузерами, в хроме не работает(.

Программиирование — процесс и искусство создания компьютерных программ с помощью языков програм&shyмирования.

p { hyphens: auto; }

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

Существует обратная задача — запретить переносы. Например, не отделять инициалы от фамилии или единицы измерения от значений (100 кг). Чтобы браузер не добавлял переносы, следует вместо обычного пробела написать неразрывный пробел &nbsp

Также у CSS свойства hyphens существует значеие none , когда слова не переносятся, даже при наличии в тексте мягких переносов.

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

Дефис

Первое решение для переноса длинных слов – с помощью дефиса.

Defisi { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

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

Обрыв слова

Обрыв слова – это свойство CSS, указывающее на то, следует ли разрывать строки внутри слов.

Obriv-slova { -ms-word-break: break-all; word-break: break-all; word-break: break-word; }

Поддержка браузерами: Обрыв слов поддерживается во всех браузерах, за исключением Opera Mini и старых версий Opera.

Обертка переполнения

Следующее решение – это использование Обертки переполнения (overflow-wrap).

Obertka-perepolneniya { word-wrap: break-word; overflow-wrap: break-word; }

Поддержка браузерами: поддерживается практически во всех браузерах. Примечание: Некоторые браузеры требуют использования «word-wrap» вместо «overflow-wrap».

Многоточие

Еще один вариант – использование многоточий.

Mnogotochiye { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

Поддержка браузерами: поддерживается всеми современными браузерами.

Это работающий метод, но далеко не идеальный.

Финальное решение: Использование Обертки переполнения и дефиса.

Finalnoye-resheniye { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

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

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

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

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

И первое свойство которое мы с вами рассмотрим называется 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. Надеюсь данная статья была для вас полезна и вы не раз еще воспользуетесь полученными знаниями.

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

CSS3: автоматический перенос текста — Верстка

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

Но всё изменилось с приходом спецификации CSS3, которая даёт нам возможность при помощи свойства hyphens управлять поведением переносов в браузерах.

Работает при условии, что текст выровнен по ширине: text-align: justify

Установка языка

Язык веб-страницы устанавливается с помощью атрибута HTML lang:

<html lang="en">

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

Синтаксис

p {
 text-align: justify;
}
/* нет переносов */
p.foo {
 hyphens: none;
}
/* ручной режим: поставить ­ в месте возможного переноса */
p.bar {
 hyphens: manual;
}
/* автоматический режим */
p.foobar {
 hyphens: auto;
}

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

БраузерChromeFirefox (Gecko)IESafariOpera
Версия136.010.05.1
Русский язык8.010.0
Свойство-webkit-hyphens-moz-hyphens-ms-hyphens-webkit-hyphens

Кроссбраузерно это выглядит так:

p {
 text-align: justify;
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 -ms-hyphens: auto;
 hyphens: auto;
}

В браузерах, которые не поддерживают свойство hyphens, можно использовать JS-библиотеку hyphenator.

Ссылки

ВКонтакте

Twitter

Facebook

Одноклассники

Linkedin

Telegram

WhatsApp

CSS3 hyphenation

Переносы слов в HTML. Переносы слов Css принудительный перенос слов

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

Дефис

Первое решение для переноса длинных слов – с помощью дефиса.

Defisi { -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

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

Обрыв слова

Обрыв слова – это свойство CSS, указывающее на то, следует ли разрывать строки внутри слов.

Obriv-slova { -ms-word-break: break-all; word-break: break-all; word-break: break-word; }

Поддержка браузерами: Обрыв слов поддерживается во всех браузерах, за исключением Opera Mini и старых версий Opera.

Обертка переполнения

Следующее решение – это использование Обертки переполнения (overflow-wrap).

Obertka-perepolneniya { word-wrap: break-word; overflow-wrap: break-word; }

Поддержка браузерами: поддерживается практически во всех браузерах. Примечание: Некоторые браузеры требуют использования «word-wrap» вместо «overflow-wrap».

Многоточие

Еще один вариант – использование многоточий.

Mnogotochiye { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

Поддержка браузерами: поддерживается всеми современными браузерами.

Это работающий метод, но далеко не идеальный.

Финальное решение: Использование Обертки переполнения и дефиса.

Finalnoye-resheniye { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

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

Влад Мержевич

В отличие от текста в полиграфии, на веб-странице редко применяются переносы, поскольку мы не привязаны жёстко к формату бумаги. Сайты могут смотреть на разных мониторах, с разным разрешением, в разных операционных системах и браузерах. Всё это порождает такое сочетание комбинаций, что предугадать, как будет выглядеть конечный текст для пользователя невозможно. Из-за этого обычно текст выравнивается по левому краю, а переносы происходят словами целиком. Но всё же переносы слов в некоторых случаях нужны, например, когда применяются длинные химические или медицинские термины, в узких колонках заданной ширины, ради эстетики. В HTML и CSS ручных или автоматических способов добавления переносов не так уж и много, так что перечислю все.

Использование тега

Тег введён в HTML5 и создаёт перенос слов при необходимости. В тех местах, где по правилам русского языка допустим перенос, вставляем (пример 1). Если слово целиком помещается в отведённую ширину, этот тег никак себя не проявит и о его наличии мы даже не узнаем. Если слово не помещается, браузер в месте нахождения тега создаёт перенос.

Пример 1. Тег

Переносы

Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.

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

Рис. 1. Текст с переносами слов

Мягкий перенос

Применение имеет серьёзный недостаток — понять, перенос перед нами или отдельное слово на другой строке, нельзя. Из-за этого может потеряться смысл предложения и его неправильно поймут. Переносы надо делать по правилам типографики, а именно: в конце строки добавлять дефис. С этим отлично справляется мягкий перенос, в коде HTML для него имеется спецсимвол — . Он выполняет ту же роль, что и тег — не виден в обычном тексте и переносит слово на другую строку, при этом добавляя дефис (пример 2).

Пример 2. Мягкий перенос

Переносы

Один-надцатиклас-сница Анжелика после окончания школы выбрала профессию дело-произ-водитель-ницы.

Результат данного примера показан на рис. 2. Заметьте, насколько эстетичнее и понятнее стал выглядеть текст в сравнении с рис. 1.

Рис. 2. Текст с переносами слов

Свойство word-break

Чтобы автоматизировать процесс создания переносов воспользуйтесь свойством word-break со значением break-all (пример 3). Добавлять какие-либо символы или теги в HTML уже не придётся, всё берут на себя стили.

Пример 3. Применение word-break

Переносы

Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.

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

Рис. 3. Текст с переносами слов

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

Свойство hyphens

И, наконец, самое мощное и удобное свойство для автоматического добавления переносов — hyphens . Его действие основано на встроенном в браузере словаре переносов, поэтому даёт наилучший результат. Поддерживается в IE10, Firefox, Android и iOS. Chrome и Opera не поддерживают. Чтобы это всё работало, для тега добавляем атрибут lang со значением ru (пример 4).

Пример 4. Использование hyphens

Переносы

Одиннадцатиклассница Анжелика после окончания школы выбрала профессию делопроизводительницы.

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

Рис. 4. Текст с переносами слов

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

Нередко возникает и обратная задача — запретить переносы в тех местах, где они по правилам языка недопустимы. Например, нельзя отрывать единицы измерения от числа (10 мл), обозначение года (54 до н. э.), инициалы от фамилии, разрывать устойчивые сокращения (т. д.) и др. Чтобы браузер не добавлял переносы в месте пробела, его следует заменить на неразрывный пробел (пример 5).

Пример 5. Использование

Переносы

Озеро по координатам 70° 58′ 19″ с. ш. 97° 24′ 5″ в. д. расположено в Таймырском Долгано-Ненецком районе Красноярского края России.

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

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

 , помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space
 имитирует работу 

Но в отличие от него не меняет шрифт на моноширинный.

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

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. {1,4}
# Повторять один или больше раз через запятую. #
×

Значения

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

Действие значений на текст представлено в табл. 1.

Пример

white-space

Пример

Великая теорема Ферма
X n + Y n = Z n
где n — целое число > 2

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

Рис. 1. Применение свойства white-space

Объектная модель

Объект .style.whiteSpace

Примечание

Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведёт себя как pre-line .

Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .

В Firefox для значения normal , nowrap , и pre воспринимаются как pre-wrap .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor»s draft (Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации ) — первая черновая версия стандарта.
×

Свойство режима записи CSS


Пример

Укажите, будут ли строки текста располагаться горизонтально или вертикально:

p.test1 {
режим записи: горизонтальный-tb;
}

p.test2 {
режим письма: вертикальный-rl;
}

span.test2 {
режим записи: вертикальный-rl;
}

Попробуй сам »

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

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

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

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

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

Объект
режим записи 48,0 12,0 41,0 11,0 35,0

Синтаксис CSS

режим письма: горизонтальный-tb | вертикальный-rl | вертикальный-lr;

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

Значение Описание
горизонтальный-tb Позвольте контенту течь горизонтально слева направо, вертикально от сверху вниз
вертикальный-rl Позвольте контенту течь вертикально сверху вниз, горизонтально от справа налево
вертикальный-lr Позвольте контенту течь вертикально сверху вниз, горизонтально от слева направо

связанные страницы

Учебное пособие по CSS: текстовые эффекты CSS



overflow-wrap — CSS: каскадные таблицы стилей

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

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

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

Изначально свойство было нестандартным расширением Microsoft без префикса под названием word-wrap и было реализовано в большинстве браузеров с таким же именем.С тех пор он был переименован в overflow-wrap , где word-wrap является псевдонимом.

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


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

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

Значения

нормальный
Строки могут разрываться только в обычных точках разрыва слова (например, в пробелах между двумя словами).
где угодно
Чтобы предотвратить переполнение, неразрывная строка символов, такая как длинное слово или URL-адрес, может быть разорвана в любой момент, если в строке нет допустимых точек разрыва. В точке останова не вставляется символ переноса. Возможности мягкого переноса, представленные разрывом слова, учитываются при вычислении внутренних размеров минимального содержимого.
разрывное слово
То же, что и в любом месте значения , с обычными неразрывными словами, которые могут быть разбиты в произвольных точках, если в строке нет других приемлемых точек останова, но возможности мягкого переноса, вводимые разрывом слова, НЕ учитываются при вычислении минимального содержимого внутренние размеры.
  нормальный | слово-разрыв | в любом месте  

Сравнение переноса переполнения, переноса слова и дефисов

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

HTML
  

Говорят, рыбалка отличная на Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg , хотя сам я там никогда не был. ( нормальный )

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

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

Говорят, на рыбалке отлично Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg , хотя сам я там никогда не был. ( разрыв слова )

Говорят, на рыбалке отлично Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg , хотя сам я там никогда не был.( дефисы , без атрибута lang )

Говорят, на рыбалке отлично Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg , хотя сам я там никогда не был. ( дефисы , правила английского языка)

Говорят, на рыбалке отлично Озеро Chargoggagoggmanchauggagoggchaubunagungamaugg , хотя сам я там никогда не был. ( дефисы , правила Германии)

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

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

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

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

.hyphens {
   дефисы: авто;
}
  
Результат

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

overflow-wrap | CSS-уловки

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

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

Значения

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

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

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

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

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

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

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

Свойство

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

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

После описания примеров того, как разрыв слова может использоваться в контенте CJK, в спецификации говорится: «Чтобы включить дополнительные возможности прерывания только в случае переполнения, см. overflow-wrap ».

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

Исторический

Перенос слов Свойство

overflow-wrap — стандартное имя для своего предшественника, свойство word-wrap . перенос слов изначально был проприетарной функцией только для Internet Explorer, которая в конечном итоге поддерживалась во всех браузерах, несмотря на то, что не была стандартом.

word-wrap принимает те же значения, что и overflow-wrap , и ведет себя так же. Согласно спецификации, браузеры «должны рассматривать word-wrap как альтернативное имя для свойства overflow-wrap , как если бы это было сокращением overflow-wrap ».Кроме того, все пользовательские агенты должны поддерживать перенос слов на неопределенный срок по устаревшим причинам.

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

Связанные

Дополнительная информация

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

Desktop
Chrome Firefox IE Edge Safari
23 49 11 18 6.1
Мобильный / планшет
Android Chrome Android Firefox Android iOS Safari
88 86 4,4 7,0-7,1

«Частичная» поддержка, указанная выше, связана с тем, что старые браузеры поддерживают перенос слов , но не перенос с переполнением . Использование обоих может обеспечить обратную совместимость.

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

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

Вы когда-нибудь хотели использовать сверхдлинное слово, такое как supercalifragilisticexpialidocious, в статье на веб-странице, но не сделали этого, потому что оно было слишком длинным, и вы не хотели испортить перенос слов? Было бы суперкалифрагилистичекспиалидоусом иметь возможность использовать такие длинные слова и знать, что упаковка не будет проблемой.Реальность такова, что HTML предоставляет тег, который позволяет вам заключать слова в середину, сообщая браузеру, где слово может быть взломано!

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

HTML Магия

В случае supercalifragilisticexpialidocious тег wbr может быть добавлен между каждым слогом или просто в нескольких местах, если необходимы разрывы. Ниже показан фрагмент HTML-кода с использованием тега:

 

Тег wbr - суперкалифрагилистичекспиалидоус!

Тег wbr супер cali хрупкий expiali послушный!

Когда вы отобразите это в своем браузере, вы увидите, что одно и то же предложение отображается дважды:

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

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

Тег wbr полезен при перечислении длинных URL-адресов на ваших веб-страницах. Тег wbr также может указывать места для взлома URL! Хотя URL-адрес будет переноситься в некоторые места пунктуации и символов, бывают случаи, когда вам нужно лучше контролировать разбиение.Например, не все браузеры будут переносить точку в ULR. Для тех, кто это делает, URL-адрес будет переноситься после точки, что может сделать его похожим на конец предложения, когда URL-адрес встроен в текст. Чтобы избежать этого, вы можете добавить тег wbr перед точками в URL-адресе. Ниже показан фрагмент кода, чтобы помочь проиллюстрировать это:

 
  • Если вы ищете статью о ботах IBM, прочтите «Использование бесплатного настраиваемого бота IBM», которое можно найти по адресу https: // www.htmlgoodies.com/beyond/using.a.free.custom.ibm.bot.html.

Без тега wbr это переносится с большим промежутком:

Добавив тег wbr в URL-адрес, вы можете избавиться от большого пробела, как показывает следующий код:

 
  • Если вы ищете статью о ботах IBM, вам следует прочитать «Использование бесплатного настраиваемого бота IBM», который можно найти по адресу https: // www .htmlgoodies .com /yond / используя . .free .custom .ibm .bot .html.

Используя ту же ширину браузера, вы можете увидеть разницу в переносе:

Заключение

Тег wbr — это простой тег, и большинство людей не подозревают о его существовании. Если вы обнаружите, что хотите, чтобы все оборачивалось иначе, чем по умолчанию, тогда тег wbr — идеальное решение. Конечно, как и весь код, который вы используете, вы должны убедиться, что он поддерживается во всех браузерах, которые может использовать ваш пользователь.На момент написания этой статьи основные браузеры (Chrome, Edge, Firefox, Opera, Safari) поддерживают тег wbr. Не гарантируется, что Internet Explorer поддерживает это.

Перенести текст в HTML-код

Перенести текст в HTML-код

Вы также можете обернуть текст вокруг изображения, добавив компонент выравнивания к тегу IMG в окне HTML.

  1. Вставьте изображение в окно редактора содержимого.

  2. Введите абзац текста в Редакторе содержимого под изображением.

  3. Щелкните, отредактируйте исходный код HTML.

  4. Чтобы выровнять абзац текста так, чтобы текст плотно прилегал к изображению ВПРАВО, используйте следующий код:

  5. Пример:

    Текст абзаца.

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

  7. Пример:

    Текст абзаца.

  8. Чтобы разместить больше места между краем изображения и блоком текста, используйте следующий код ::

  9. Пример:

  10. ( Необязательно ) Увеличьте количество пикселей (пикселей), чтобы увеличить интервал.

  11. Нажмите «Обновить», чтобы вернуться к предыдущему виду. Теперь ваш текст должен появиться рядом с вашим изображением.

CSS | свойство word-wrap — GeeksforGeeks

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

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

Синтаксис:

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

Стоимость объекта:

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

    Синтаксис:

     перенос слов: нормальный; 

    Пример:



    < html >

    < Головка >

    < титул >

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

    титул >

    < стиль >

    дел. {

    перенос слов: нормальный;

    ширина: 150 пикселей;

    граница: сплошной черный 1 пиксель;

    }

    стиль >

    головка >

    < корпус >

    < дел. >

    GeeksforGeeks: AComputerSciencePortalForGeeks

    дел. >

    корпус >

    html >

    Выход:

  • break-word : слова, превышающие ширину контейнера, будут произвольно разбиты, чтобы соответствовать границам контейнера.

    Синтаксис:

     перенос слов: слово-разрыв; 

    Пример:

    < html >

    < Головка >

    < титул >

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

    титул >

    < стиль >

    дел. {

    перенос слов: разрыв слова;

    ширина: 150 пикселей;

    граница: сплошной черный 1 пиксель;

    }

    стиль >

    головка >

    < корпус >

    < дел. >

    GeeksforGeeks: AComputerSciencePortalForGeeks

    дел. >

    корпус >

    html >

  • начальный: Используется для установки значения по умолчанию для свойства переноса слов.
  • наследовать: Это свойство наследуется от своего родителя.

Поддерживаемые браузеры: Браузеры, поддерживаемые свойством перенос слов , перечислены ниже:

  • Google Chrome 4.0
  • Internet Explore 5.5
  • Firefox 3.5
  • Safari 3.1
  • Opera 10,5

CSS: свойство переноса слов


В этом руководстве по CSS объясняется, как использовать свойство CSS под названием word-wrap с синтаксисом и примерами.

Описание

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

Синтаксис

Синтаксис CSS-свойства переноса слов:

  перенос слов: значение;  

Параметры или аргументы

значение

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

Значение Описание
разрывное слово Слова могут быть разбиты произвольно, если слово слишком длинное и не помещается в его контейнер
p {word-wrap: break-word; }
нормальный Разрешены только обычные точки разрыва слова
p {word-wrap: normal; }

Примечание

  • Если свойство переноса слов выражено как фиксированное значение, оно может быть положительным или отрицательным.
    • Положительное значение добавит дополнительный интервал между словами (в дополнение к стандартному интервалу для шрифта).
    • Отрицательное значение удалит пробелы между словами.
  • Если свойство переноса слов установлено на нормальный , выбранный шрифт будет определять интервал между словами.
  • См. Также свойства overflow и overflow-x.

Совместимость с браузером

Свойство CSS word-wrap имеет базовую поддержку в следующих браузерах:

  • Хром
  • Firefox (Gecko)
  • Internet Explorer 5.5+ (IE 5.5+)
  • Opera 10.5+
  • Safari (WebKit)

Пример

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

Обычный

Давайте посмотрим на пример, в котором мы установили свойство переноса слов на нормальный .

CSS будет выглядеть так:

  p {перенос слов: нормальный; ширина: 125 пикселей; фон: светло-голубой; отступ: 5 пикселей; }  

HTML будет выглядеть так:

  

Этот абзац написан techonthenet.com и содержит слово antidisestablishmentarianism, чтобы продемонстрировать, как бороться с разбиением слов.

Результат будет выглядеть так:

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

Break-Word

Теперь давайте посмотрим, что произойдет, когда мы воспользуемся тем же примером и установим для свойства переноса слов значение break-word .

CSS будет выглядеть так:

  p {word-wrap: break-word; ширина: 125 пикселей; фон: светло-голубой; отступ: 5 пикселей; }  

HTML будет выглядеть так:

  

Этот абзац был написан techonthenet.com и содержит слово «антидисестаблишментарианство», чтобы продемонстрировать, как бороться с разбиением слов.

Результат будет выглядеть так:

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