【CSSのみ】button内で改行する方法

普通のhtmlの場合

サンプルコード

<button style="white-space:pre-line;word-break:break-all;">
改行してます。asdfasdfasdfasdfasdf    happiness (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) (^_^) happiness
こんにちは
</button>

通常版: css設定なし

改行してます。asdfasdfasdfasdfasdf happiness (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) happiness こんにちは

改行版

pre-lineだけ

改行してます。asdfasdfasdfasdfasdf happiness (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) happiness こんにちは

preだけ

改行してます。asdfasdfasdfasdfasdf happiness (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) happiness こんにちは

word-break: break-allあり

改行してます。asdfasdfasdfasdfasdf happiness (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) (^^) happiness こんにちは

Q. word-break要る？

画面の横幅減らすと違いがわかりやすい。 人によってはいらんかも。

compare buttons

資料

• word-break - CSS: カスケーディングスタイルシート | MDN
• word-break - CSS: カスケーディングスタイルシート | MDN

おまけ: jsxの場合

              <Button
                style={{
                  whiteSpace: "pre-line",
                  wordBreak: "break-all",
                }}
              >

感想

white-spaceは存在感なさすぎて忘れてしまう。