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>