The \n operator seems to have no effect on webpage

Question

I'm currently trying to first generate string and then set some text-content on my webpage to this string. This string consists of multiple Javascript objects. I would like each of these objects to be printed on a new line. For all I know, I can simply add \n after each object within my string and it should work. However, it doesn't. Here is my code:

function stringifyObjects(objects) {    
    if (objects.length > 0) {
        str = objects.slice(0, 5).reduce( function (acc, o) { 
            return acc + " " + stringifyObject(o) + "\n"
        }, "") 
        if (objects.length > 5) {
            str = str + " and " + (objects.length - 5) + " more"
        }
        console.log(str)
        return str               
    } else {
        return "No objects to show"
    }    
}

function stringifyObject(object) {
    const content = JSON.stringify(object.content).replaceAll('"', '')
    return message.type + ": " + content 
}

paragraph.textContent = stringifyObjects(someObjects)

The console.log() seems to work just fine, showing every object on a seperate line. Within the paragraph however, there are no newlines. Example below:

Any idea what might be causing this and how I would resolve this?