Как реализовать перенос слова при адаптации в кнопке?

Question

[Антон Вебсайтовский]

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

Это отлично делает тег <br/>, но чтобы его при нужном разрешении экрана выводить, надо чет типа того делать, <div class="br"><br/></div>, а выглядит это как костыль.

Кто как реализовывает данную задачу, можно конечно кнопке задать width: 100px; но это тоже не очень красиво и не ровно будет.

Пример кнопки:
https://jsfiddle.net/mgjz1cf4/2/

Правда там на примере он слово целиком переносит, видимо там в системе так сделано, а мне надо переносить при определенном разрешении экрана.

Answer 1

[Alex]

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

Comments

[Антон Вебсайтовский]

Этот вариант я знаю. Я думал чет мож другое есть. так как я кнопке не задаю width.
Думаю если ничего не найду, то так и сделаю, вот только там у вас нет стиля чтобы слово переносилось, а не обрезалось как бы через
but-
ton

[Антон Вебсайтовский]

Чет у меня не срабатывает: word-break: break-word;

[Антон Вебсайтовский]

Это тож чет не пашет

-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

flex мож мешает?