状況

簡易的な例を挙げると、次のような状況になっていた。

<style>
  h1 {
    font-family: "Noto Sans JP, sans-serif";
    font-size: 24px;
    line-height: 1.2;
  }
  .overflow-ellipsis {
    white-space: nowrap;
    overflow-y: hidden;
    text-overflow: ellipsis;
  }
</style>
<h1>とても長いタイトル</h1>

原因

まず、overflow-xとoverflow-yは副作用があるプロパティである。どちらのプロパティも初期値はvisibleであるが、どちらか一方を指定すると、もう一方は暗黙的にautoとして扱われる。

つまり、overflow-y: hiddenを指定した場合、overflow-xはautoとして扱われる。そのため、コンテンツがコンテナからはみ出ていれば縦スクロールバーが表示されるようになる。

次に、フォントにはフォント自体に高さがあり、line-heightがこれを下回ると、コンテナをコンテンツが超えた判定を受ける。日本語フォントの場合、最低でも1.4は必要なことが多い。

この2つの要因が重なったことで、縦スクロールバーが表示されるようになっていた。

対処法

overflow-y: hiddenをoverflow: hiddenに変更することで、overflow-xもhiddenとして扱われるようになる。これにより、縦スクロールバーが表示されなくなる。

一方、overflow-x: visibleにすることは無意味である。なぜなら暗黙的にautoになるわけではなく、visibleが暗黙的にautoのように振る舞うためである。