【HTML】【CSS】文字列のある要素からはみ出した部分だけ色を変える

　次の様なはみ出した文字が見えなくなる問題があります。

　この問題が起きる場合のひとつとして異なる背景色に文字がまたがり文字色が片方の背景色に近い色の場合があります。
　対処方法ははみ出させない様にする、はみ出した上で見える様にする、の二種類に大別できます。ここでははみ出した上で色を変えて見やすくする方法を 2 つ紹介しします。

　やり方の一つは CSS のmix-blend-mode: difference;を用いる方法です。これは使用可能な状況が限られ、大雑把ですがすぐに適用しやすい方法です。

mix-blend-mode – CSS： カスケーディングスタイルシート ｜ MDN
– CSS： カスケーディングスタイルシート ｜ MDN

　実装したデモが次です。

　mix-blend-modeは要素とその親要素の色をどの様に混ぜるかを指定する設定です。differenceは明るい色から、暗い色を減算した結果を適用する指定です。これにより文字色として白を指定すると、背景色の反対側の色とでもいうべき色（色相がやや反対のどこかで、輝度がほぼ反対）が文字色になります。このため彩度や輝度が大きい濃い背景色の時強力に働き、逆に彩度や輝度が小さい灰色に近い背景色の時にはうまく働きません。この方法が最もうまく働くのは次の様な縞々な背景を相手にする時でしょう。縞々ならば二つの色が離れている、つまり反対の色が遠い色が使われているため、mix-blend-mode: difference;は大体うまく働きます。色を自在に決められないのは不便ですが、おおよそいい感じに読みやすい色になってくれます。

　もう一つの方法は違う文字色の要素を二つ用いる方法です。実装は次です。

　これは枠の内部でのみ使う文字と枠外でのみ使う文字を定義し、それを表示することで実装しています。これは次の部分で定義しています。

<div class="base-paper">
  <div class="main-text-box">
    <span class="main-text">ほげほげほげ</span>
  </div>
  <div class="sub-text-box">
    <span class="sub-text">ほげほげほげ</span>
  </div>
</div>

.base-paper {
  /* 枠の高さ設定 */
  max-height: 2.25em;
  /* 二つの要素を重ねるために position: absolute; を使うのでその準備 */
  position: relative;
}

.main-text-box {
  /* 枠（親要素）と同等の高さ設定 */
  max-height: inherit;
  /* 内部でのみ表示される === 外部に出ようとした時は overflow: hidden; で隠れる */
  overflow: hidden;
}

.sub-text-box {
  /* 外部でのみ表示される === 内部にいる時は他の要素で上から隠される */
  /* 内部要素と重ね合わせるために position: absolute; を用います。*/
  position: absolute;
  top: 0;
  left: 0;
  /* 内部要素の下側に潜るために z-index を -1 で設定します。*/
  z-index: -1;
}

　これによりある要素の範囲の内外で違う文字色を使った文字列を表示できます。これは任意の二色を使えるという点で先述したmix-blend-modeよりも色に融通が利いて便利です。一方で文字列がはみ出した時にしか使えないため市松模様の様な細かい色の切り替えに対応するのが困難です。