How to show multiline text in a table cell
HtmlCssTablerowHtml Problem Overview
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.
Html Solutions
Solution 1 - Html
You want to use the CSS white-space:pre applied to the appropriate <td>. To do this to all table cells, for example:
td { white-space:pre }
Alternatively, if you can change your markup, you can use a <pre> tag around your content. By default web browsers use their user-agent stylesheet to apply the same white-space:pre rule to this element.
> The PRE element tells visual user agents that the enclosed text is "preformatted". When handling preformatted text, visual user agents: > > * May leave white space intact. > * May render text with a fixed-pitch font. > * May disable automatic word wrap. > * Must not disable bidirectional processing.
Solution 2 - Html
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.
Solution 3 - Html
Wrap the content in a <pre> (pre-formatted text) tag
<pre>hello ,
my name is x.</pre>
Solution 4 - Html
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.
Solution 5 - Html
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.
Solution 6 - Html
the below code works like magic to me >>
td { white-space:pre-line }
Solution 7 - Html
On your server-side code, replace the new lines (\n) with <br/>.
If you're using PHP, you can use nl2br()
Solution 8 - Html
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>
Solution 9 - Html
I added only <br> inside the <td> and it works good, break the line!
Solution 10 - Html
For my case, I can use like this.
td { white-space:pre-line , word-break: break-all}
Solution 11 - Html
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>
Solution 12 - Html
I found a lot but all of them dont work for me. If you retrieved a long text from your db and put it on the table but just wanna do the front-end styling to break the word to the new line.
For my case, white-space: break-spaces; work for me