Text Wrap

Use text-wrap and text-nowrap utilities to control whether text wraps to the next line.

---

Basic example

Use text-wrap to allow text to wrap normally and text-nowrap to keep it on a single line:

const _headline = 'Beloved Manhattan soup stand closes';
const _body =
    "New Yorkers are facing the winter chill with less warmth this year as "
    "the city's most revered soup stand unexpectedly shutters, following a "
    "series of events that have left the community puzzled.";

class TextWrapBasicExample extends StatelessWidget {
  const TextWrapBasicExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const Style(
      'mx-auto grid max-w-xs gap-4 border-x border-x-pink-400/30 py-8 text-gray-700 dark:text-gray-400',
      children: [
        Style(
          'text-xl font-semibold text-gray-900 dark:text-white',
          child: Text(_headline),
        ),
        Style('text-sm/6', child: Text(_body)),
      ],
    );
  }
}

class TextWrapBasicPage extends StatelessWidget {
  const TextWrapBasicPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: const TextWrapBasicExample());
  }
}

Class reference

Class	Behavior
text-wrap	softWrap: true
text-nowrap	softWrap: false
text-balance	Not yet supported — Flutter’s paragraph engine has no balanced line-breaker. See the Library prerequisites section in PLAYGROUND_PARITY.md.
text-pretty	Not yet supported — Flutter has no orphan-prevention line-breaker. See the Library prerequisites section in PLAYGROUND_PARITY.md.