Measure, Truncate, Indent

Utilities to improve the readability of a text.

Class	Properties
.measure-tight	max-width: 20em;
.measure	max-width: 30em;
.measure-wide	max-width: 38em;
.measure-wider	max-width: 40em;
.indent	text-indent: 1em, margin-top: 0, margin-bottom: 0;
.truncate	white-space: nowrap, overflow: hidden, text-overflow: ellipsis;

Measure

Measure refers to the length of a line of text. It is one of the most important aspects of readability. Change the length by applying a .measure-utility.

.measure-tight ( ~45 characters)
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

.measure ( ~66 characters)
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

.measure-wide ( ~80 characters)
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

.measure-wider ( ~90 characters)
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Indent

An indentation in the first line is the most common way to signal the beginning of a new paragraph. It helps the reader to distinguish adjacent paragraphs when reading or searching the text. To indent a line, simply apply .indent to a paragraph.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown York.

Truncate

If a text inside a container becomes too long, it can be shortened with the .truncate-utility.

Read more about this beautiful placeholder text on our webseite www.whatthehellisthis.com.

Responsive

All classes described above can be responsively controlled. Simply add the breakpoint at the end of each class name, in the form of @{breakpoint}. In the following example, the text always runs across the entire width until it is limited in width at the breakpoint xl by .measure.