whitespace-nowrap/pre/pre-line, break-words/normal, hyphens — text flow control. This family contains 35 generated classes in Nakshora 3.0.

Classes#

ClassGenerated CSS
break-before-autobreak-before: auto;
break-before-avoidbreak-before: avoid;
break-before-allbreak-before: all;
break-before-avoid-pagebreak-before: avoid-page;
break-before-pagebreak-before: page;
break-before-leftbreak-before: left;
break-before-rightbreak-before: right;
break-before-columnbreak-before: column;
break-inside-autobreak-inside: auto;
break-inside-avoidbreak-inside: avoid;
break-inside-avoid-pagebreak-inside: avoid-page;
break-inside-avoid-columnbreak-inside: avoid-column;
break-after-autobreak-after: auto;
break-after-avoidbreak-after: avoid;
break-after-allbreak-after: all;
break-after-avoid-pagebreak-after: avoid-page;
break-after-pagebreak-after: page;
break-after-leftbreak-after: left;
break-after-rightbreak-after: right;
break-after-columnbreak-after: column;
hyphens-nonehyphens: none;
hyphens-manualhyphens: manual;
hyphens-autohyphens: auto;
text-wraptext-wrap: wrap;
break-normaloverflow-wrap: normal; word-break: normal;
break-wordsoverflow-wrap: break-word;
break-allword-break: break-all;
break-keepword-break: keep-all;
whitespace-normalwhite-space: normal;
whitespace-nowrapwhite-space: nowrap;
whitespace-prewhite-space: pre;
whitespace-pre-linewhite-space: pre-line;
whitespace-pre-wrapwhite-space: pre-wrap;
whitespace-break-spaceswhite-space: break-spaces;
break-spaceswhite-space: break-spaces;

Example#

example
html
<pre class="whitespace-pre-wrap font-mono text-sm">code…</pre>

Responsive & variants#

Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • URLs bursting layouts? break-all on the container
  • whitespace-pre-line keeps your \n line breaks

colors/index|Text color · utilities/typography/font-size|Font size