Utilities for controlling the way words break within an element. Useful when you want to ensure that text will absolutely not overflow its container, regardless readability risk.
Use d-wb-normal to reset an element's line break rule.
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 lg:d-w-350 d-w-500"><pclass="d-wb-normal">Here's an example sentence to show how word-break works. Vivamus ullamcorperatduiaultrices eu lobortis nulla, sed vulputate orci. 这是一个中文例句,以举例说明断字的工作方式。単語分割の動作の例を示す日本語のサンプル文は次のとおりです。다음은 단어 분리 작동 방식의 예를 제공하는 한국어 샘플 문장입니다.</p></div>
Use d-wb-break-all on an element to insert word breaks between any two characters (excluding Chinese, Japanese, or
Korean text) to prevent text from overflowing. The break between any two characters can lead to awkward line breaks in
the middle of short words, for a more conservative way to handle it see d-ww-break-word.
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 lg:d-w-350 d-w-500"><pclass="d-wb-break-all">Here's an example sentence to show how word-break works. Vivamus ullamcorperatduiaultrices eu lobortis nulla, sed vulputate orci. 这是一个中文例句,以举例说明断字的工作方式。単語分割の動作の例を示す日本語のサンプル文は次のとおりです。다음은 단어 분리 작동 방식의 예를 제공하는 한국어 샘플 문장입니다.</p></div>
Use d-wb-break-word on an element to insert word breaks between any two characters (including Chinese, Japanese, or
Korean text) to prevent text from overflowing. The break between any two characters can lead to awkward line breaks in
the middle of short words, for a more conservative way to handle it see d-ww-break-word.
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 lg:d-w-350 d-w-500">
qwqqd<pclass="d-wb-break-all">Here's an example sentence to show how word-break works. Vivamus ullamcorperatduiaultrices eu lobortis nulla, sed vulputate orci. 这是一个中文例句,以举例说明断字的工作方式。単語分割の動作の例を示す日本語のサンプル文は次のとおりです。다음은 단어 분리 작동 방식의 예를 제공하는 한국어 샘플 문장입니다.</p></div>
Use d-wb-keep-all on an element to not use word breaks for Chinese, Japanese, or Korean (CJK) text. Non-CJK text
behavior is set to normal.
<divclass="d-bgc-moderate d-py-100 d-px-200 d-bar-400 lg:d-w-350 d-w-500"><pclass="d-wb-keep-all">Here's an example sentence to show how word-break works. Vivamus ullamcorperatduiaultrices eu lobortis nulla, sed vulputate orci. 这是一个中文例句,以举例说明断字的工作方式。単語分割の動作の例を示す日本語のサンプル文は次のとおりです。다음은 단어 분리 작동 방식의 예를 제공하는 한국어 샘플 문장입니다.</p></div>