I'll provide examples of CSS text-wrap variations in the context of a toast popup. We'll use the shadcn/ui Toast component and create different variations using Tailwind CSS classes. Let's create a React component that demonstrates these variations.

This example demonstrates various CSS text-wrap variations in the context of toast popups:

1. Normal Wrap: This is the default behavior without any special wrapping rules applied.
2. No Wrap: Uses whitespace-nowrap to prevent text from wrapping. We've added overflow-x-auto to allow horizontal scrolling if the text overflows.
3. Break All: Uses break-all to break words at any character, which can be useful for very long words or URLs.
4. Break Words: Uses break-words to only break words when necessary to prevent overflow, which is often more readable than break-all.
5. Balance: Uses text-balance to attempt to balance the length of lines for more aesthetically pleasing text layout.
6. Pretty: Uses text-pretty to apply advanced typographic features for improved readability and aesthetics.

To see these examples in action, you can click on each button to trigger a toast with the corresponding text-wrap variation. The toasts will appear with the specified wrapping behavior, allowing you to compare the different styles.

Note that the text-balance and text-pretty properties are relatively new and may not be supported in all browsers. They are part of the CSS Text Module Level 4 specification and provide more advanced text layout options.

You can further customize the appearance of the toasts by adjusting the Tailwind CSS classes or adding custom styles as needed.