Text Transform
Utilities for controlling the capitalization and wrapping of text.
On this page
typography/text_transform
The live demo is not available for this example.
text_transform.dart
View source
// Uppercase
WText('Hello World', className: 'uppercase')
// Capitalize
WText('hello world', className: 'capitalize')
// Prevent wrapping
WText('Long text that should not wrap...', className: 'whitespace-nowrap')
Basic Usage#
Use uppercase and lowercase to force text casing. capitalize converts the first character of each word to uppercase.
WDiv(
className: 'flex flex-col gap-4',
children: [
WText('uppercase text', className: 'uppercase'), // UPPERCASE TEXT
WText('LOWERCASE TEXT', className: 'lowercase'), // lowercase text
WText('capitalize this text', className: 'capitalize'), // Capitalize This Text
WText('Normal Case Text', className: 'normal-case'), // Normal Case Text
],
)
Quick Reference#
| Class | Transform | Description |
|---|---|---|
uppercase |
Uppercase | Converts all text to uppercase. |
lowercase |
Lowercase | Converts all text to lowercase. |
capitalize |
Capitalize | Capitalizes the first letter of each word. |
normal-case |
None | Resets text transformation (useful for overrides). |
Whitespace & Wrapping#
Control how text handles whitespace and wrapping using whitespace- utilities.
typography/whitespace_preview
The live demo is not available for this example.
whitespace_preview.dart
View source
// Prevent text from wrapping
WText(
'This is a long sentence that will not wrap to the next line.',
className: 'whitespace-nowrap',
)
| Class | Wrap | Description |
|---|---|---|
whitespace-normal |
Yes | Allow text to wrap normally (default). |
whitespace-nowrap |
No | Prevent text from wrapping. |
text-wrap |
Yes | Alias for whitespace-normal. |
text-nowrap |
No | Alias for whitespace-nowrap. |
text-balance |
Balance | Balances text across lines for better readability. |
Responsive Design#
Apply transforms or whitespace rules conditionally at different breakpoints.
// Uppercase on mobile, normal case on tablet+
WText('Responsive Text', className: 'uppercase md:normal-case')
// Wrap on mobile, no-wrap on large screens
WText('Responsive Wrap', className: 'whitespace-normal lg:whitespace-nowrap')
Dark Mode#
While text transforms rarely change based on theme, you can apply them conditionally if needed.
WText('Dark Mode Text', className: 'normal-case dark:uppercase')
Customizing Theme#
Text transform and whitespace utilities are hardcoded in the parser and cannot be customized via WindThemeData.