スキップしてメイン コンテンツに移動

投稿

7月, 2015の投稿を表示しています

だれでも簡単!文字列を任意の場所で改行

キャッチコピーや見出しをテキスト化した場合、思わぬ場所で改行され、読みづらいと思ったことはありませんか?

特に、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