Fixing oversized margin on text selection

Sometimes when selecting paragraph text on HTML documents, you may get a selection that takes up the full page width.

Typically, the paragraph you’ve selected has a width or max-width property, but the selection width is calculated at 100% of the width of the parent element or the page. It looks something like this:

You can see the broken demo here

This, it turns out, is a pretty easy fix - you only need to add overflow: hidden; to the text container.

In my case, that’s the article block. The style now appears as:

article {
  max-width: 400px;
  margin: 0 auto;
  overflow: hidden;
}

and the solution:

You can see the working demo here

Hopefully that helps to improve the appearance of text selection on your long-form text :)