Перенос текста на кнопке | CSS

• Текст в кнопке в две строки
• Перенос длинного слова в button
• Перенос длинного слова в input
• Запретить переносить слова на новую строку
• Как с помощью CSS настроить перенос слов

Перенос текста в button и input

Первый вариант наиболее хорош.

<button>слово<br>слово</button>

<input value="слово
слово" type="button">

<input value="слово&#13;&#10;слово" type="button" class="raz">

<input value="слово&#x00A;слово" type="button">

<input type="button" value="слово слово" style="width: 5em; white-space: pre-line;">

Перенос длинного слова в кнопке

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

Тег button

<button style="word-break: break-all;">11111111111111111111111111111111111111111111111</button>

<button style="white-space: pre-line;">11111111111111111111111111111111111111111111111</button>

<button style="overflow-wrap: break-word;">11111111111111111111111111111111111111111111111</button>

<button style="word-wrap: break-word;">11111111111111111111111111111111111111111111111</button>

<button style="-webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;">11111111111111111111111111111111111111111111111</button>

<button>11111&shy;111111111111111111111111111111111111111111</button>

<button>11111&#8203;111111111111111111111111111111111111111111</button>

Тег input