[html] How to show multiline text in a table cell

I want to show a paragraph from database into a table cell.

The result is a large 1 line, ignoring how its organised in database. ignoring 'enters' for example (new lines)

I want to show it exactly according to how it's written in database.

For example if paragraph is saved like this:

hello ,
my name is x.

I want it to be showed exactly like that, instead of:

hello, myname is x.

This question is related to html css tablerow

The answer is


Wrap the content in a <pre> (pre-formatted text) tag

<pre>hello ,
my name is x.</pre>

style="white-space:pre-wrap; word-wrap:break-word"

This would solve the issue of new line. pre tag would add additional CSS than required.


If you have a string variable with \n in it, that you want to put inside td, you can try

<td>
    {value
        .split('\n')
        .map((s, index) => (
            <React.Fragment key={index}>
                {s}
                <br />
            </React.Fragment>
        ))}
</td>

the below code works like magic to me >>

td { white-space:pre-line }

I use the html code tag after each line (see below) and it works for me.

George Benson </br> 123 Main Street </br> New York, Ny 12344 </br>


Hi I needed to do the same thing! Don't ask why but I was generating a html using python and needed a way to loop through items in a list and have each item take on a row of its own WITHIN A SINGLE CELL of a table.

I found that the br tag worked well for me. For example:

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
  <TABLE>
            <TR>
                <TD>
                    item 1 <BR>
                    item 2 <BR>
                    item 3 <BR>
                    item 4 <BR>
                </TD>
            </TR>
        </TABLE>
  </BODY>

This will produce the output that I wanted.


On your server-side code, replace the new lines (\n) with <br/>.

If you're using PHP, you can use nl2br()


Two suggestions to solving this problem:

SOLUTION 1: <div style="white-space:pre;">{database text}</div> or <pre>{database text}</pre>

This is good solution if your text has no html tags or css properties. Also allows to maintain tabs for example.

SOLUTION 2: Replace \n with <p></p> or <br/>

This is a solution if you would just like to add break-lines, without losing other text properties or formatting. An example in php would be $text = str_replace("\n","<br />",$database_text);

You can also use <p></p> or <div></div>, but this requires a bit more text parsing.


For my case, I can use like this.

td { white-space:pre-line , word-break: break-all}

I added only <br> inside the <td> and it works good, break the line!