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 198 · Accepted Answer · answered Jun 07 '12 at 18:00

198

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

284,740
104
634
722

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 73 · Answer 2 · edited Nov 08 '17 at 18:12

73

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

4,768
1
12
32

answered May 01 '15 at 23:01

Jajikanth pydimarla

1,374
12
11

1

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 34 · Answer 3 · answered Jun 07 '12 at 18:00

34

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

18,005
11
60
93

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 11 · 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 10 · Answer 6 · answered Apr 25 '19 at 05:55

10

the below code works like magic to me >>

td { white-space:pre-line }

answered Apr 25 '19 at 05:55

Sumon Bappi

1,849
6
36
74

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

8

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

214,658
40
293
332

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

7

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

97
1
1

2

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

527
5
18

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

3

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.

1,749
13
15

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,082
11
13

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,212
14
27

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

How to show multiline text in a table cell

13 Answers13

Linked