表示するデバイスによって改行する位置を指定したい

デザイナーから依頼を受けてコーディングを行う場合、よくある修正依頼が「ここは改行してほしい」という要望です。
しかし表示するデバイスの横幅によっては、改行させてしまうと、不自然な位置で折り返しが起きてしまったり、意図しない行数になってしまうこともしばしば。レスポンシブだと不自然な改行が起こるのであまりよくないやり方であるといってもなかなか伝わりにくいところがあります。

本来、PHPを使ったレスポンシブサイトでは、改行位置の指定はあまり現実的ではありません。たとえば改行位置を指定したときに、画面幅の広いスマホでは問題なく表示されますが、古いスマホで画面幅が狭い場合は、改行を指定した位置よりも表示幅が狭く、一行目の途中で自動改行され、さらに指定した位置でも改行されてしまうため、実質3行の表示になってしまいます。

例

デバイスの幅によって改行するかしないかを定義しておけば解決する

デバイスの幅によって改行するかしないかをコントロールできれば、この問題を程度解決することができます。例えば、H2タグで長い見出しを書きたいときに、PCは大きい文字で2行にしたい。でもスマホで改行位置を指定するのは危険なので、改行せずに1列で表示したいといったときに便利です。

メディアクエリで改行するかしないかを指定するためのCSS

メディアクエリで場合分けし、疑似要素を使って改行を挿入することで、画面幅によって改行するかしないかをそれぞれ指定することができます。CSSで定義しておけば、実際の制作過程において、クラス指定をするだけで改行をコントロールできるので非常に便利です。
ブレークポイントは適宜指定してください。ここでは、タブレットは960px以下、スマホは480px以下としています。

注： 以下説明では、
PC: パソコン　TB: タブレット　SP: スマホ
と略しています。

※タブレットのみ改行というケースはあまりないので作成していませんが、もしそういう場面が発生したら、下記のコードをアレンジしてください。

PCのみ改行し、TBとSPでは改行しないとき

改行したい場所でClass名「pc_br」を指定するだけです。

/*--PCサイズ（961px以上）--*/
@media only screen and (min-width: 961px) {
	.pc_br::before {
		content: "\A";
		white-space: pre;
	}
}

PCとTBでは改行し、SPでは改行しないとき

改行したい場所でClass名「pc-tb_br」を指定するだけです。

/*--PC/TBサイズ（481px以上）--*/
@media only screen and (min-width: 481px) {
	.pc-tb_br::before {
		content: "\A";
		white-space: pre;
	}
}

SPのみ改行し、PCとTBでは改行しないとき

改行したい場所でClass名「sp_br」を指定するだけです。

/*--スマホサイズ（480px以下）--*/
@media only screen and (max-width: 480px) {
	.sp_br::before {
		content: "\A";
		white-space: pre;
	}
}

SPとTBでは改行し、PCでは改行しないとき

改行したい場所でClass名「sp-tb_br」を指定するだけです。

/*--タブレットサイズ（960px以下）--*/
@media only screen and (max-width: 960px) {
	.sp-tb_br::before {
		content: "\A";
		white-space: pre;
	}
}

使い方

改行したい位置に、<span>を指定するだけでOK。下記コードに上記で指定したクラス名を入れ、任意の場所に挿入するだけです。

例えば、「当店のウェブサイトにようこそ！どうぞごゆっくり！」という文章にPCのみ改行を入れたい場合は、以下のように書くだけです。

当店のウェブサイトにようこそ！どうぞごゆっくり！

また、たとえば文中ですでに <span>を使っている文章があれば、classの中に格納するだけで、その <span> で囲まれた文章の頭で改行されます。。

当店のウェブサイトにようこそ！どうぞごゆっくり！