Multiline text in a table cell using bootstrap

Question

I want to show a long paragraph of string into a table cell using bootstrap. It contains some newline characters \r\n. I tried to use style="white-space:pre" as this stackoverflow post suggests but that breaks bootstrap text wrap. I also tried to change \r\nto <br> but it does not work. <br> shows up as a text.

This is how my table looks like..

<table id="table1" class="table table-bordered">
    <tbody>
        <tr>
            <th class="col-md-2" scope="row">Description</th>
            <td id="description">Very long test with \r\n so I want to show this in multiline and also want to wrap the text using bootstrap.</td>
        </tr>
    </tbody>
</table>

Solution

Changing the pagebreaks to HTML breaks (br tag) works fine in jsfiddle. See my link below. Make sure that when you are generating the HTML you are generating actual < and > symbols, and not the HTML codes.

https://jsfiddle.net/joedonahue/zpj94p0b/

<table id="table1" class="table table-bordered">
    <tbody>
        <tr>
            <th class="col-md-2" scope="row">Description</th>
            <td id="description">Very long test with <br/> so I want to show this in multiline and also want to wrap the text using bootstrap.</td>
        </tr>
    </tbody>
</table>