Fixing the Horizontal Sprawl Problem on Web Pages

Screen Width: px - This is being displayed through the use of JavaScript. 

The recommended line length in characters on the web for readability purposes is perhaps 40-75 characters including spaces, or perhaps up to 100 - or

According to, the preceding line was 253 characters. Yet viewed in Chrome on a monitor with a medium font size and a resolution of 1920 x 1080, the preceding line occupied almost an entire line.

Thus, with no special coding, the line length on a 1920 x 1080 screen is far too long for best reading.

An inferior solution to this problem is to use <br> tags to force the browser to the next line when the line length appears too long. The problem is that this solution is very specific to the screen resolution of the device. The line breaks may not come at the right place on another device.

Another simple solution is to specify the width in percentage terms. The problem again is that say a 60% solution that looks good on a large screen resolution is leaving lots of empty space on a device with a smaller screen resolution. The same goes for specifying the width in absolute term (e.g. pixels):

  1. if the user's screen resolution is below the specified value, horizontal scroll bars appear.
  2. large portions of the screen may be blank

A better solution would be to specify max-width in terms of pixels.

Probably the best solution is to use a width and font size appropriate to the screen resolution of the user's browser. CSS3 media queries are now the standard way to do this.

Revised: 2/8/21
Comments to Bill Pegram,