キャッチコピーや見出しをテキスト化した場合、思わぬ場所で改行され、読みづらいと思ったことはありませんか?
特に、PCではきれいに表示されても、スマホでは…ということもありますよね。
しかしレスポンシブデザインの場合、brタグを使うわけにもいかない。
これはよく使うCSSのdisplay要素とHTMLのspanタグを活用することで解決できます。
▶サンプルページ
HTML
<span>改行させたくない</span>
<span>語句を</span>
<span>タグの中に</span>
<span>入れるだけ。</span>
CSS
span {
display: inline-block;
}
▼PCでの見え方の違い
まさかのこれだけで、誰でも簡単に折り返しをコントロールできちゃう。
▶サンプルページ
Written by Creative Flake
コメント
コメントを投稿