Setting Line Length in CSS (and Fitting Text to a Container) | CSS-Tricks
July 15, 2025
First, what is line length? Line length is the length of a container that holds a body of multi-line text. “Multi-line” is the key part here, because text becomes less readable if the beginning of a line of text is too far away from the end of the prior line of text. This causes users to reread lines by mistake, and generally get lost while reading.
Luckily, the Web Content Accessibility Guidelines (WCAG) gives us a pretty hard rule to follow: no more than 80 characters on a line (40 if the language is Chinese, Japanese, or Korean), which is super easy to implement using character (ch) units:
Source: Setting Line Length in CSS (and Fitting Text to a Container) | CSS-Tricks
Subtle things most people won’t ever consciously think about, like how many characters on average there are on a line of text, can significantly affect readability.
Here’s how we can specify the length of a line of text using CSS.
