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

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-pre

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-pre-line

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-pre-wrap

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-break-spaces

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-unset

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-truncate

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.

<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

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

.d-wb-keep-all

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

.d-wb-unset

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

<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>