Is it possible to display newlines inside web notifications?

You can include newlines and line breaks inside the body of web notifications.

Newline characters (\n) work properly on all major browsers (like all the other Unicode characters) and they are also rendered and displayed to the user in most situations (like a preformatted text in HTML).

However using the newlines has a drawback: the text of a notification gets truncated if its height is too large.

For example, at the time of writing, Chrome on MacOS displays a maximum of three lines of text.

In order to make good use of the space available to the notification text, we recommend to avoid newlines or to keep the number of newlines to a minimum (max 1 or 2).

Finally note that in some situations (e.g. Chrome on Android) the newlines are ignored when the notification is collapsed (i.e. they are converted to a normal space character), while they are displayed properly when you expand the notification.

Note that in many situations you don’t need newlines. For example, instead of using a newline in the body of the notification, you can consider moving the first line to the title of the notification and keep only the second line in the body. This optimizes the space available and ensures that more text is visible to the user.

Finally, if you want to check how a specific browser displays the newlines or other characters, you can try to send a notification directly using this demo.

Leave a Comment