ChatGPTと相談しながら悪戦苦闘したので残しておく
ある要素が短い間はそのままの位置、長くなったら少しづつ移動させる
たとえば、5em(5文字分くらい)を超えたら、すこし右に寄せる例
translateX(max(0px,calc((100% – 5em) / 2)));
ポイント
maxの引数が「0」だとエラーになる。
5emを超えた分の半分だけ寄せている
カッコの結びの数がおかしいとまわりのCSSを巻き込んでエラーになるので注意！
逆(左)に動かす場合は、全体に-1をかける
translateX(calc(-1 * max(0px,calc((100% – 5em) / 2))))