примеры кода и поддержка браузерами
От автора: недавно я работал над веб-сайтом, который использовал большие заголовки (имеется в виду размер шрифта), а также был доступен на немецком языке. Это означает, что часто на нем встречались довольно длинные слова, и они часто не помещались в контейнер. Если ничего не делать, это «сломало бы» макет, так как появилась бы горизонтальная полоса прокрутки. Итак, я перечитал статью, которую написал почти четыре года назад о работе с длинными словами и реализовал окончательное решение.
Казалось, что это все еще отлично работает, но с этим подходом были некоторые проблемы. Давайте рассмотрим, как поддерживается браузерами в CSS перенос слов, а также в целом поговорим о CSS Hyphenation — как их использовать сегодня и какую функцию я бы хотел увидеть в браузерах.
Поддержка браузерами
Поддержка CSS Hyphenation довольно хорошая. Следует помнить, что, хотя они работает в браузерах на основе Chromium на платформах Mac и Android, в настоящий момент (январь 2019 года) это не работает в Windows и Linux. Они также не работают в Opera Mini и некоторых других мобильных браузерах (браузер Blackberry, IE mobile и т. д.), Но в целом поддержка стабильная.
Использование переносов CSS
Чтобы сегодня использовать дефисы, нам все еще нужно добавлять префиксы для IE / Edge / Chromium, поэтому лучше использовать следующее для каждого текста, который должен использовать дефисы:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее.hyphenate { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
.hyphenate { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } |
Поскольку вы, вероятно, хотите разбивать слова, а не макет в неподдерживаемых браузерах, я рекомендую следующее. Таким образом, все слова будут переноситься в поддерживающих браузерах и разбиваться на новые строки в неподдерживающих.
.hyphenate { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
.hyphenate { overflow-wrap: break-word; word-wrap: break-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } |
Теперь, когда мы знаем, как сегодня использовать CSS Hyphenation, давайте посмотрим, чего нам не хватает, чтобы сделать его еще лучше.
Слишком много переносов слов
Самая большая проблема, с которой мы столкнулись, заключалась в том, что CSS Hyphenation слишком часто переносил слова. Что это означает, показывает следующий пример, здесь он переносит слово Josef, которое выглядит не очень хорошо. Это также затрудняет чтение текста и, следовательно, делает его менее доступным.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееЭто связано с тем, что, если UA (пользовательский агент) не может рассчитать лучшее значение, предполагается, что hyphens: auto означает два символа для до и после переноса и пять для слова в целом. Это означает, что для каждого слова длиной не менее пяти символов будет использоваться перенос, и он будет разбивать слова до двух символов после / до переноса.
Я не уверен, почему они придумали эти значения по умолчанию, но сейчас мы имеем именно это. Существует решение, которое уже определено в спецификации — свойство hyphenate-limit-chars.
Оно определяет минимальное количество символов в слове с переносом, и поэтому мы можем использовать его для переопределения значения по умолчанию 5 (длина слова) 2 (до разрыва) 2 (после разрыва). Таким образом, теоретически мы могли бы применить следующее, чтобы использовать переносы только для слов с 10 символами и более четырех символов до / после переноса:
hyphenate-limit-chars: 10 4 4;
hyphenate-limit-chars: 10 4 4; |
В действительности это свойство все еще поддерживается только в Internet Explorer 10+ и в Edge с префиксом -ms. Было бы здорово получить лучшую поддержку для hyphenate-limit-chars — так что, пожалуйста, сообщите вашим любимым браузерам, что вы этого хотите — спасибо! Здесь это можно сделать для Chromium, а здесь для Firefox.
Дополнительное примечание: Webkit-браузеры (Safari) поддерживают свойства -webkit-hyphenate-limit-before, -webkit-hyphenate-limit-after и -webkit-hyphenate-limit-lines, которые позволяет также определить минимальную длину, а также минимальное количество символов до / после переноса.
Как вы можете видеть, поддержка CSS Hyphenation довольно неплоха в 2019 году. Единственная проблема для меня — отсутствие поддержки свойства hyphenate-limit-chars, что, как мы надеемся, улучшится в будущем, когда его будет запрашивать достаточное количество пользователей / разработчиков.
Обновление от 28.01.2018: добавлена информация о похожих свойствах браузеров на основе webkit, на что указывают Александр Рутц и Джимини Паноз.
Автор: Michael Scharnagl
Источник: https://justmarkup.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
СмотретьГде всё сложно с переносами строк. Вот все 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
Символ ­ делает то же самое, что и элемент <wbr> (На самом деле не совсем, поскольку, в отличие от <wbr>, добавляет дефисы при переносе. — прим. перев.)
Можете вставить разрыв строки с помощью псевдоэлемента ::before { content: "\A"; }, если только элемент не строчный (в противном случае потребуется white-space: pre;)
P.S. Это тоже может быть интересно:
Как создать перенос слов CSS — абзацы с переносом слов CSS
Время чтения: 2 мин.
Продолжаем изучать возможности CSS3 и на очереди у нас перенос слов. Перенос слов является очень полезным свойством, потому что текст на странице смотрится красивее. Также, иногда приходится делать колонки как в газетах, и тогда выравнивание по правому или левому краю смотрится некрасиво. А вот если растянуть по всей ширине колонки, тогда и для глаза приятнее читать такой текст. Но и в этом случае есть такой нюанс как большие пространства между словами, что смотрится некрасиво. Это мы и будем исправлять в данном уроке.
Возможности CSS3:
Изучая статьи, которая подобрал для вас, выше, вы также узнаете массу полезных свойств, а также узнаете о новых возможностях CSS3, которая позволяет использовать меньше еще меньше изображений на сайте.
Создаем перенос слов
Текст без переносов
Если кто-то не понял о чем идет речь, вот пример без использования переноса слов:
С переносами
А вот пример, когда мы используем перенос слов CSS:
Круто! А как это сделать в коде?
Сейчас, я думаю, все прекрасно понимают что мы будем делать. Поэтому пора узнать о новом свойстве, которое есть в CSS3!
А пишется это свойство вот так — hyphens.
Просто, не так ли? Но для каждого из браузеров есть свои префиксы, поэтому в коде это выглядит так:
1 2 3 4 5 6 7 8 | p {
text-align: justify; /* текст необходимо растянуть на всю ширину блока, чтобы в дальнейшем переносить */
/* свойство переноса слов для разных браузеров */
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
} |
Не забывайте растягивать текст по всей ширине блока с помощью свойства text-align: justify, иначе нужного результата вы не увидите.
Вывод
Короткий и простой урок, который позволит сделает ваш сайт еще более «удобным» для пользователя. Ведь мы ежедневно читаем огромное количество информации в сети — так давайте же сделаем этот процесс максимально приятным для посетителей! Ведь перенос слов CSS сделать очень легко, добавив пару строчек кода в ваш файл стилей.
Успехов!
С Уважением, Юрий Немец
word-wrap | CSS | WebReference
Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.
Краткая информация
| Значение по умолчанию | normal |
|---|---|
| Наследуется | Да |
| Применяется | Ко всем элементам |
| Процентная запись | Неприменима |
| Анимируется | Нет |
Синтаксис ?
word-wrap: normal | break-wordОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- normal
- Строки не переносятся или переносятся в тех местах, где явно задан перенос (например, с помощью <br>).
- break-word
- Перенос строк добавляется автоматически, чтобы слово поместилось в заданную ширину блока.
Пример
<!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. Перенос длинных слов
Объектная модель
Объект.style.wordWrap
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.08.2017
Редакторы: Влад Мержевич
Укрощаем длинный текст средствами HTML и CSS — Блог
Перенос длинных слов
Проблема переноса длинных слов встречается не так редко, как может показаться. Если не брать во внимание слова-рекордсмены вроде “метилпропенилендигидроксициннаменилакрилической кислоты”, порой в установленные макетом страницы рамки не умещаются менее экзотические слова.
Браузеры по умолчанию не разбивают длинные слова на несколько строк. Перенос на новую строку происходит только там, где стоит дефис, пробел или Enter (исключение составляют неразрывный пробел и неразрывный дефис ‑). При некоторых условиях может появиться ползунок горизонтальной прокрутки, но чаще всего слово выйдёт за границы отведённого ему блока.
Немного иначе ведут себя flexbox элементы и таблицы, они игнорируют установленную ширину и всегда растягиваются настолько, чтобы вместить текст целиком. В примере ниже flex-контейнеру было задано ограничение по ширине (width: 300px;), однако видно, что в зависимости от контента блок может занимать больше места. Не самая приятная особенность для верстальщика, уверенного, что в его макете всё рассчитано до пикселя.
Перенос слов средствами HTML
Как говорилось выше, по умолчанию браузер не переносит слова на несколько строк. Отчасти потому, что он может не знать, как это сделать грамотно.
Указать браузеру, в каких местах слово может быть разбито переносом можно с помощью символа мягкого разрыва (­). Переносы будут добавлены только там и тогда, когда это необходимо, чтобы слово поместилось в контейнер.
В 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">
Двухсот­восьмидесяти­восьми­киллограммовый тролль
</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 (исключение составляют неразрывный пробел &nbsp; и неразрывный дефис &#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>&shy;</code>). Переносы будут добавлены только там и тогда, когда это необходимо, чтобы слово поместилось в контейнер.</p> <p>В HTML5 появился тег <strong><wbr/></strong>, обладающий схожим эффектом, однако он не добавляет символ переноса в месте разрыва слова, что выглядит уже не так красиво.</p> <pre> <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></pre> <p> </p> <p><img alt=»» src=»/documents/10136/1129663/Article+18+-+3.png/04451e1d-9f02-48c5-8f66-b18ac5d042e8?t=1546979243873″ /></p> <p> </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> <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></pre> <p> </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 — Примеры
- Текст в кнопке в две строки
- Перенос длинного слова в button
- Перенос длинного слова в input
- Запретить переносить слова на новую строку
- Как с помощью CSS настроить перенос слов
Перенос текста в button и input
Первый вариант наиболее хорош.
слово
слово <button>слово<br>слово</button>
<input value="слово слово" type="button">
<input value="слово слово" type="button">
<input value="слово
слово" type="button">
<input type="button" value="слово слово" style="width: 5em; white-space: pre-line;">
Перенос длинного слова в кнопке
Первый вариант позволяет сделать так, чтобы ширина кнопки не превышала ширину родителя («резиновая, сужающаяся кнопка»), а её содержимое переносилось на новую строку при необходимости.
Тег button
11111111111111111111111111111111111111111111111
<button style="word-break: break-all;">11111111111111111111111111111111111111111111111</button>
11111111111111111111111111111111111111111111111
<button style="white-space: pre-line;">11111111111111111111111111111111111111111111111</button>
11111111111111111111111111111111111111111111111
<button style="overflow-wrap: break-word;">11111111111111111111111111111111111111111111111</button>
11111111111111111111111111111111111111111111111
<button style="word-wrap: break-word;">11111111111111111111111111111111111111111111111</button>
11111111111111111111111111111111111111111111111
<button style="-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;">11111111111111111111111111111111111111111111111</button>
11111111111111111111111111111111111111111111111
<button>11111­111111111111111111111111111111111111111111</button>
11111111111111111111111111111111111111111111111
<button>11111​111111111111111111111111111111111111111111</button>