CSS

テキストの折返しの制御

レスポンシブで望む場所で改行させる

画面の横幅が狭くなることによって文節中に改行して見栄えが悪くなったり、文言の意味が理解しづらい状況になることがあります。それを防ぐための方法。

メディアクエリを利用

1.改行したい場所に<br class="">
2.メディアクエリで横幅が大きい時はdisplay: none;
横幅が狭くなって、変な場所で改行し始めたらdisplay: block;

inline-block

1.改行したい場所で分けてそれぞれdisplay: inline-block;でくくる

See the Pen PRbKXQ by aiyumi (@aiyumi) on CodePen.