マーカー文字でPCとSPで改行位置が違う場合の対処法

こんにちは。今日も自分用のメモに近いのですが、「マーカー文字でPCとSPで改行位置が違う場合の対処法」について書こうと思います。

ここでいうマーカー文字とはこのようなイメージです。（テキストは適当に考えました笑）

こういう文章が長いデザインの時、PCとSPで改行位置が違う場合があります。
画面幅を変えても問題ないようにするには少しコツが要ります。

今回のポイントは直下セレクタを使いこなすことです！
ではさっそくコードを見ていきましょう〜！

コード

HTML編

            <div class="lead">
              <p>
                <span>
                  <span>生徒は佐藤先生のもとで</span>
                  <span>コツコツと勉強しており、</span>
                </span>
              </p>
              <p>
                <span>
                  <span>幅広い科目を学んでいます。</span>
                </span>
              </p>
            </div>

ここでは分かりやすいように<span>前後で改行を多用していますが、スペースが空いたりするので本来はつめた方がいいです！

以下ポイントを書きます↓

CSS編

.lead {
  line-height: 2;
  color: #fff;
  font-weight: bold;
}

.lead span {
  display: inline-block;
  line-height: 1;
}

@media only screen and (min-width: 769px), print {
  .lead p + p {
    margin-top: 10px;
  }
  .lead p > span {
    padding: 0.5em 0.7em;
    background-color: #70bdad;
  }
}

@media only screen and (max-width: 768px) {
  .lead {
    max-width: 320px; //幅を広げたときの対策（数値は任意）
  }
  .lead p > span span {
    margin-top: 0.5em;
    padding: 0.5em 0.7em;
    background-color: #70bdad;
  }
}

Sassで見た方が理解しやすいかもしれないのでそちらも載せておきますね。

@include mq-pc
{
  .lead
  {
    p
    {
      + p
      {
        margin-top: 10px;
      }
      > span
      {
        padding: 0.5em 0.7em;

        background-color: #70bdad;
      }
    }
  }
}

@include mq-sp
{
  .lead
  {
    max-width:320px;
    p
    {
      > span
      {
        span
        {
          margin-top: 0.5em;
          padding: 0.5em 0.7em;

          background-color: #70bdad;
        }
      }
    }
  }
}