Layout

Utility classes for controlling typography layout.

Text Align

Starting in v5.8.0, Dialtone provides immutable type utility classes, meaning they include !important to override CSS specificity.

Class	Output
.d-ta-left	text-align: left !important;
.d-ta-right	text-align: right !important;
.d-ta-center	text-align: center !important;
.d-ta-justify	text-align: justify !important;
.d-ta-unset	text-align: unset !important;

.d-ta-left
The quick brown fox jumps over the lazy dog.

.d-ta-right
The quick brown fox jumps over the lazy dog.

.d-ta-center
The quick brown fox jumps over the lazy dog.

.d-ta-justify
The quick brown fox jumps over the lazy dog. And here's another a sentence to help illustrate a justified line.

.d-ta-unset
The quick brown fox jumps over the lazy dog.

<p class="d-ta-left">…</p>
<p class="d-ta-right">…</p>
<p class="d-ta-center">…</p>
<p class="d-ta-justify">…</p>
<p class="d-ta-unset">…</p>

Whitespace

Starting in v5.8.0, Dialtone provides immutable type utility classes, meaning they include !important to override CSS specificity.

Class	Output	Description
.d-ws-normal	white-space: normal !important;	White space sequences are collapsed and newline characters in the source are treated like white space. Lines are broken as needed to fill boxes.
.d-ws-nowrap	white-space: nowrap !important;	White space sequences are collapsed like normal, but line breaks are not honored keeping text from wrapping.
.d-ws-pre	white-space: pre !important;	White space sequences are preserved from the source. Lines are only broken at new line characters and elements.
.d-ws-pre-line	white-space: pre-line !important;	White space sequences are collapsed. Lines are broken at new line characters, elements, or as needed to fill boxes.
.d-ws-pre-wrap	white-space: pre-wrap !important;	White space sequences are preserved. Lines are broken at new line characters, elements, or as needed to fill boxes.
.d-ws-break-spaces	white-space: break-spaces !important;	Acts like pre-wrap except that any sequence of preserved white space always take up space, a line breaking opportunity exists after every preserved white space character, and preserved spaces take up space and do not hang which affects the box's intrinisic sizez (min-content and max-content sizes).
.d-ws-unset	white-space: unset !important;	Resets to white-space property to it's default initial value.
.d-truncate	overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;	Combination class that adds an ellipsis for copy which is limited to one line that exceeds the box bounds.

.d-ws-normal

Vivamus ullamcorper at dui a ultrices. Duis sed magna scelerisque odio ultrices volutpat. Ut condimentum finibus iaculis. Ut id porttitor orci. Aliquam non euismod justo, et molestie ex. Nullam eu lobortis nulla, sed vulputate orci.

.d-ws-nowrap

.d-ws-pre

.d-ws-pre-line

.d-ws-pre-wrap

.d-ws-break-spaces

.d-ws-unset

.d-truncate

<p class="d-ws-normal">…</p>
<p class="d-ws-nowrap">…</p>
<p class="d-ws-pre">…</p>
<p class="d-ws-pre-line">…</p>
<p class="d-ws-pre-wrap">…</p>
<p class="d-ws-break-spaces">…</p>
<p class="d-truncate">…</p>

Word Break

The word-break CSS property set where line breaks appear for text within its content box.

Class	Output	Description
.d-wb-normal	word-break: normal !important;	Uses the default line break rule.
.d-wb-break-all	word-break: break-all !important;	Word breaks are inserted between any two characters (excluding Chinese, Japanese, or Korean text) to prevent text overflowing.
.d-wb-keep-all	word-break: keep-all !important;	Word breaks aren't usd for Chinese, Japanese, or Korean (CJK) text. Non-CJK text behavior is set to normal.
.d-wb-unset	word-break: unset !important;	Resets to the initial, default line break rule.

.d-wb-normal

Here's an example sentence to show how word-break works. Vivamus ullamcorperatduiaultrices eu lobortis nulla, sed vulputate orci. 这是一个中文例句，以举例说明断字的工作方式。単語分割の動作の例を示す日本語のサンプル文は次のとおりです。다음은 단어 분리 작동 방식의 예를 제공하는 한국어 샘플 문장입니다.

.d-wb-break-all

.d-wb-keep-all

.d-wb-unset

<p class="d-wb-normal">…</p>
<p class="d-wb-break-all">…</p>
<p class="d-wb-keep-all">…</p>
<p class="d-wb-unset">…</p>

Overflow Wrap

The overflow-wrap CSS property applies to inline elements, helping the browser to determine where line breaks should be inserted within an otherwise unbreakable string to prevent copy from overflowing its bounds.

Class	Output	Description
.d-ow-normal	overflow-wrap: normal !important;	Lines will only break at normal break points such as a space between two words.
.d-ow-anywhere	overflow-wrap: anywhere !important;	To keep copy from overflowing its content box, line breaks are inserted at any point in a line. No hyphenation character is inserted at the break point.
.d-ow-break-word	overflow-wrap: break-word !important;	The same as the anywhere value, except soft wrap opportunities are not considered when calculating min-content intrinsic sizes.
.d-ow-unset	overflow-wrap: unset !important;	Resets to the initial, default line break rule.

.d-ow-normal

Here's an example sentence to show how overflow-wrap works. Vivamusullamcorperatduiaultriceseulobortisnulla, sed vulputate orci.

.d-ow-anywhere

Here's an example sentence to show how overflow-wrap works. Vivamusullamcorperatduiaultriceseulobortisnulla, sed vulputate orci.

.d-ow-break-word

Here's an example sentence to show how overflow-wrap works. Vivamusullamcorperatduiaultriceseulobortisnulla, sed vulputate orci.

.d-ow-unset

Here's an example sentence to show how overflow-wrap works. Vivamusullamcorperatduiaultriceseulobortisnulla, sed vulputate orci.

<p class="d-ow-normal">…</p>
<p class="d-ow-anywhere">…</p>
<p class="d-ow-break-word">…</p>
<p class="d-ow-unset">…</p>