Force line breaks in javascript html string

I have php which is being used to pull a text description of an image data-caption="'.$attachment_data['caption'].'"

I’m calling that text in my javascript modal window with $("article").html(this.el.attr('data-caption'))

It outputs the text correctly, but I cannot get the text to include any line breaks. I’ve tried using css styles to fix this, such as word-wrap: break-word; but none of them affect the line breaks. I’ve also made sure to use .html() instead of .text().

Is the problem with the string itself, and the solution is using javascript to break lines manually?

Here’s the fiddle