CSS

CSSで文字を改行させずに1行で表示する方法

「。」とか「、」とか幅が足りずに改行されてしまう…ってことがよくあります。
特に、デザインデータでは入っているのに、コーディングしたら入らないということありますよね。
そういう時、デバイスの幅にもよりますが、どうしても改行させずに1行にとどめてほしいと言われてしまったときの対処方法を紹介します!

CSSで文字を改行させずに1行で表示する

CSSで文字を改行させずに1行で表示する方法はめちゃくちゃ簡単で、書きを改行されてしまう要素に入れるだけ!

white-space: nowrap;

ね? 簡単でしょう?
ただ、枠から文字がはみ出てしまうので「、」とか「。」だけのフォント上の右の余白で改行されるなら見た目は気になりませんが、大きくはみ出ると・・・
使い所が難しいところですね。

素直に改行してもきれいに見えるようにしたほうがいいでね?

ということで、CSSで文字を改行させずに1行で表示する方法でした!

 

 

web制作を勉強したい方におすすめの教材も紹介しているので是非参考にしてみてください。
web制作の勉強にオススメの書籍を紹介します!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。
web制作で独学で稼ぎたいという人必見!
RELATED POST

COMMENT

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)