timolins / react-hot-toast

Smoking Hot React Notifications 🔥
https://react-hot-toast.com
MIT License
9.84k stars 331 forks source link

Really Long Toast Messages Overflow Toast Container #177

Open kharithomas opened 2 years ago

kharithomas commented 2 years ago

When messages are really long they overflow the actual toast container.

example

Currently, I have my Toaster setup like:

<Toaster position="top-center" reverseOrder={false} />

Using the toast like:

toast.success(
      "This is a very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong toast message",
      {
        style: {
          background: "#333",
          color: "#fff",
          textOverflow: "ellipsis",
          overflowWrap: "break-word"
        },
        duration: 5000
      }
    );

It seems even using textOverflow or overflowWrap properties don't work.

DutchJelly commented 2 years ago

This could probably be fixed with a jsx span element as a message that has the word break styling.