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.

score 215 · Accepted Answer · answered Jun 07 '12 at 18:00

215

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.

answered Jun 07 '12 at 18:00

Phrogz

296,393
112
651
745

Thumbs up, `white-space` is a CSS 2.1 property that's widely supported. Tested on IE8, works great. – leesei Apr 19 '13 at 02:26
I'm in a situation now where `white-space: pre;` is being ignored when applied in a `` tag. Using `
` to wrap our content works fine, but due to the use of this table (exporting to excel), large #s of columns and rows balloon the size of the exported file and cause excel to crash upon reading the file. (odd, I know). Has anyone else seen this or have an idea for a solution?
– JoeBrockhaus Aug 28 '13 at 19:20
1

This solution is far from being perfect. It results that Excel produces mutiple lines for the cells that have linebreaks. The only correct answer can be found here: http://www.bennadel.com/blog/1095-maintaining-line-breaks-in-an-html-excel-file.htm – Elmue Aug 05 '16 at 01:47

score 82 · Answer 2 · edited Nov 08 '17 at 18:12

82

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.

edited Nov 08 '17 at 18:12

moveson

5,103
1
15
32

answered May 01 '15 at 23:01

Jajikanth pydimarla

1,512
13
11

2

This is a nice, targeted solution. The `

` tag does all kinds of things beyond just allowing newline characters, but these style settings solve only the problem presented.

– moveson Nov 08 '17 at 18:24

I had a problem in which my data contains new line. Other solution like replacing text with
or
or
were being treated as text only. This solution works perfectly overcoming that problem.
– leocrimson Apr 23 '19 at 16:07
Fantastic!! This work very well for me. I had a JDataTable which listed mutliple text and I needed you css to wrap the text properly! Day saver Thanks alot! – PatsonLeaner Jul 09 '19 at 10:29
1

This works for me in terms of preserving line breaks, but adds a line break to the top of every cell... any solutions? – jtr13 Nov 09 '19 at 20:33
I so want to upvote your answer but it's on 69... – JOSEPH Blessingh Dec 28 '21 at 23:22

score 37 · Answer 3 · answered Jun 07 '12 at 18:00

37

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

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

answered Jun 07 '12 at 18:00

Joyce Babu

19,602
13
62
97

5

This does, however, overwrite the font with monospace. – hardmooth May 24 '18 at 06:43

Daniel Vila Boa · Answer 4 · 2019-05-27T10:20:44.920

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.

score 13 · Answer 5 · answered May 26 '16 at 10:01

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.

score 12 · Answer 6 · answered Apr 25 '19 at 05:55

12

the below code works like magic to me >>

td { white-space:pre-line }

answered Apr 25 '19 at 05:55

Sumon Bappi

1,937
8
38
82

score 9 · Answer 7 · answered Jun 07 '12 at 18:00

9

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

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

answered Jun 07 '12 at 18:00

gen_Eric

223,194
41
299
337

score 6 · Answer 8 · answered Nov 04 '13 at 13:39

6

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>

answered Nov 04 '13 at 13:39

Rene

95
1
1

3

it should be a comment not an answer. – Deep Sharma Nov 04 '13 at 13:57
breaks the table semantics. When viewing the table using a text-based browser, new lines are shown as being like table rows. – JAT86 Mar 26 '18 at 18:12

score 4 · Answer 9 · answered Mar 24 '19 at 17:16

4

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

answered Mar 24 '19 at 17:16

Zvi

577
6
19

Zhong Ri · Answer 10 · 2020-11-03T19:11:57.927

2

For my case, I can use like this.

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

edited Nov 03 '20 at 19:11

answered Oct 22 '20 at 09:54

Zhong Ri

2,556
1
19
23

score 1 · Answer 11 · answered May 16 '20 at 07:01

1

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>

answered May 16 '20 at 07:01

Eugene Ihnatsyeu

1,299
13
15

1

This comment is underrated. Thanks! – IronmanX46 Sep 06 '21 at 03:27

score 0 · Answer 12 · answered Mar 20 '22 at 02:09

0

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

answered Mar 20 '22 at 02:09

Kopi Bryant

1,300
1
15
30

score 0 · Answer 13 · answered May 30 '22 at 16:57

0

if you are working in only HTML you can use \n or <br> or <pre> any tag but if you are doing CRUD operations

" In my case, I'm using Jquery for creating and updating an 'td.html()' and retrieve 'td.html(input)'. "

answered May 30 '22 at 16:57

Burhan U Din

11
1

score 0 · Answer 14 · answered Mar 10 '23 at 05:02

you can use break tag in html but in excel it creates problem,it divides text in to two cells so add in this way and add this css in in it

<br style="mso-data-placement:same-cell;"/>

addin this css in br tag in html on downloading excel it will work as you have described

score -1 · Answer 15 · edited Sep 23 '22 at 11:16

-1

Add a new CSS rule for td called white-space:nowrap.

td { white-space:nowrap }

edited Sep 23 '22 at 11:16

node_modules

4,790
6
21
37

answered Sep 23 '22 at 02:41

RuchDi

250
3
14

How to show multiline text in a table cell

15 Answers15

Linked