Brian J Brian J - 2 months ago 22
CSS Question

How to wrap comma separated string onto new line in td cell?

I've one column in a table that contains comma separated emails in each cell of that column.

So for example a cell may contain the following and cell displays email inline. Instead of breaking the second email onto a newline:

jdoe@gmail.com,bgates@outlook.com


Question:

How can you wrap comma separated strings onto new line in td cell?

What I've tried:

I can't statically set a
<br/>
between the emails as they are being read back from a database dynamically.

I did also try adding a span within the td and applying a custom CSS style
wrap-emails
. But this style doesn't display the emails stacked as expected in the cell:

CSS style:

span.wrap-emails {
word-wrap:break-word

}


Cell definition:

<td><span class="wrap-emails">@row.Contact_Emails</span></td>

Answer

You should be able to replace the commas with brs using the following in your razor:

@Html.Raw(row.Contact_Emails.Replace(",","<br>"))

The Html.Raw bit is so that it renders the br instead of encoding it