How to show multiline text in a table cell

Question

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

User · Answer

If you have a string variable with  n in it  that you want to put inside td  you can try   lt td gt       value          split   n            map  s  index    gt                 lt React Fragment key  index  gt                   s                   lt br   gt               lt  React Fragment gt               lt  td gt

User · Answer

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    lt  DOCTYPE html gt   lt HTML gt       lt HEAD gt           lt TITLE gt  lt  TITLE gt       lt  HEAD gt       lt BODY gt     lt TABLE gt               lt TR gt                   lt TD gt                      item 1  lt BR gt                      item 2  lt BR gt                      item 3  lt BR gt                      item 4  lt BR gt                   lt  TD gt               lt  TR gt           lt  TABLE gt     lt  BODY gt      This will produce the output that I wanted

User · Answer

I added only  lt br gt  inside the  lt td gt  and it works good  break the line

User · Answer

You want to use the CSS white-space pre applied to the appropriate  lt td gt   To do this to all table cells  for example   td   white-space pre     Alternatively  if you can change your markup  you can use a  lt pre gt  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

User · Answer

On your server-side code  replace the new lines   n  with  lt br  gt    If you re using PHP  you can use nl2br

User · Answer

For my case  I can use like this  td   white-space pre-line   word-break  break-all

User · Answer

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

User · Answer

Two suggestions to solving this problem   SOLUTION 1   lt div style  white-space pre   gt  database text  lt  div gt  or  lt pre gt  database text  lt  pre gt   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  lt p gt  lt  p gt  or  lt br  gt   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    lt br   gt    database text    You can also use  lt p gt  lt  p gt  or  lt div gt  lt  div gt   but this requires a bit more text parsing

User · Answer

Wrap the content in a  lt pre gt   pre-formatted text  tag   lt pre gt hello   my name is x  lt  pre gt

User · Answer

I use the html code tag  after each line  see below  and it works for me     George Benson  lt  br gt  123 Main Street  lt  br gt  New York  Ny 12344  lt  br gt

User · Answer

the below code works like magic to me     td   white-space pre-line

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

Examples related to html

Examples related to css

Examples related to tablerow