DTPでの「泣き別れ」をWEBで、どう処理するか・・・

「広告」

HTML/CSS

2020.03.062020.12.16

記事内に広告が含まれています。

「広告」

WEBのお仕事をしていると、必ずといっていいほど、「ここで、改行して」という指示が、お客様から来ます（笑）。

例えば、上記、右上の「右側まで」のあとの部分、「入」と「力欄」の間で、改行されてしまっています。
お客様から、「右側まで」の後の「、」で、改行をしてと指示が来ます。

これがDTP業界での、「泣き別れ」です。
「泣き別れを解消して！」
などと指示が来ます。

ＷＥＢ上では、どう、解消させるか・・・

「広告」

なきわかれ解消１、inline-block
解決方法２、BR
解決方法３、スマホとPCで、改行位置を変更する
なきわかれ　結論

なきわかれ解消１、inline-block

#box1 {
  width: auto;
  border: solid 1px #ccc;
  padding: 10px;
  overflow: hidden;
}
#box1 p span {
  display: inline-block;
}

↑サンプルＣＳＳ

<div id="box1">

<p>
<span>ContactForm7を設置すると、入力欄が、「短い」場合があります。
赤い矢印枠部分の右側まで、</span><span>入力欄を伸ばしたい（カスタマイズしたい）！

どうすべきか・・・
入力欄の外側のボックスは、既存のデザインテーマのClassを使っています。
（赤矢印部分）
このボックスは全体のバランスで、残したいデザインです・・・。
</span>
</p>
</div>

↑サンプルＨＴＭＬ

inline-blockで、spanの区切りで改行させるようにする。

上記では、「」で改行されます。
「（文章）」を、ひとつの文章と認識します。

上記のように「右側まで、」の後で改行されました。

ただ、これは、レスポンシブで、横幅が狭くなってしまった場合は・・・

と、「ここで改行しないで！」と、思ってしまう結果になってしまいます（残念）。

「広告」

解決方法２、BR

<div id="box1">

<p>
ContactForm7を設置すると、入力欄が、「短い」場合があります。
赤い矢印枠部分の右側まで、<br />入力欄を伸ばしたい（カスタマイズしたい）！

どうすべきか・・・
入力欄の外側のボックスは、既存のデザインテーマのClassを使っています。
（赤矢印部分）
このボックスは全体のバランスで、残したいデザインです・・・。
</p>
</div>

解決方法１の「inline-block」と、上記の「 」では、
なきわかれに関しては、結果は同じです。

ならば、「 」でいいのでは？
と思ってしまいます。

この「br」も、レスポンシブ対応で、横幅を狭くすると、見苦しい感じになります。

「広告」

解決方法３、スマホとPCで、改行位置を変更する

<style>

#box1 {
  width: auto;
  border: solid 1px #ccc;
  padding: 10px;
  overflow: hidden;
}
@media (max-width:  767px) {
  br.brPC{
    display: none;
  }
}
@media (min-width:  768px) {
  br.brSP{
    display: none;
  }
}
</style>

<div id="box1">

<p>
ContactForm7を設置すると、入力欄が、「短い」場合があります。<br class="brSP">
赤い矢印枠部分の右側まで、<br class="brPC">入力欄を伸ばしたい（カスタマイズしたい）！

どうすべきか・・・
入力欄の外側のボックスは、既存のデザインテーマのClassを使っています。
（赤矢印部分）
このボックスは全体のバランスで、残したいデザインです・・・。
</p>
</div>

に、クラス指定をします。「brPC」というクラスでは、PC表示のみに有効になる「 」。
「brSP」というクラスでは、スマホ表示時の改行指示。

となります。