デザイン・表示崩れ
回答済みスマホでボタンの文字が2行になってしまいます
PCではきれいなのに、スマホではボタンの文字が途中で改行されます。 余白も変に広がります。 ...
相談内容
PCではきれいなのに、スマホではボタンの文字が途中で改行されます。
余白も変に広がります。
CSSで直せますか？
Answer
ラッコ研究員からの回答
ボタン文言を短くするのが一番安全ですが、どうしても1行にしたい場合は、対象ボタンに white-space: nowrap; を指定します。
ただし、スマホ幅で長い文言を無理に1行にすると横にはみ出すことがあります。フォントサイズ、左右padding、ボタン幅をセットで調整し、最小幅でも文字が収まるか確認しましょう。PCとスマホで別指定にするのが実務ではよく使う方法です。