logo

Air CSS ver. 2.3.2

Line length (measure)

Measure or line length is the distance between the left and right edges of a text block. Overly long lines are a common problem, but they're easy to correct. Shorter lines will make a big difference in the legibility and professionalism of your layout.

Mnemonics

Bases
Modifiers
Optional extensions
ll = line-length

-narrow — average length of 45 characters
-medium — average length of 66 characters
-wide — average length of 80 characters

-m = medium width container
-l = large width container


Examples

<p class="ll-narrow">lorem ipsum ...</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus temporibus soluta veritatis dolorum rerum vero quibusdam at repellendus qui? Ad aliquam nesciunt voluptate aspernatur cumque excepturi necessitatibus neque maxime obcaecati! 
<p class="ll-medium">lorem ipsum ...</p>
<p class="llm">lorem ipsum ...</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus temporibus soluta veritatis dolorum rerum vero quibusdam at repellendus qui? Ad aliquam nesciunt voluptate aspernatur cumque excepturi necessitatibus neque maxime obcaecati! 
<p class="ll-wide">lorem ipsum ...</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus temporibus soluta veritatis dolorum rerum vero quibusdam at repellendus qui? Ad aliquam nesciunt voluptate aspernatur cumque excepturi necessitatibus neque maxime obcaecati!

Source code

/* generate: container-rule */
.ll-narrow { max-width: 45ch; }
.ll-medium { max-width: 66ch; }
.ll-wide { max-width: 80ch; }

.llm { max-width: 66ch; }
/* end generate */