How to Show Multiline Text in a Table Cell

How to show multiline text in a table cell

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.

How to make the table use multiple lines on long text using css

I'll give you two solutions.

Statically created text in table cell

Your text in the TD Cell is given by the time you developed the website and not created automatically by , lets say an XML response. Then according to http://www.uwec.edu/help/html/tb-multiline.htm here is your answer:

When the text in a single table cell exceeds a few words, a line break (<BR>)
may improve the appearance and readability of the table. The line
break code allows data to be split into multiple lines. Place the line
break code <BR> within the text at the point(s) you want the line to
break. Notice in the examples below that the line break code can be
used in data cells as well as in headers.

Remember that the user of your document has final control over font
and size. Some line break codes, though appropriate with your
preference settings, may be inappropriate under other conditions.

Dynamically created text in table cell

Else if your text inside the cell comes dynamically and you don't know the actual size of it you can make the following:

1. Add a class to the table cell you want the effect to be placed. It is not necessary to do it although.

2. Add the following to style to the table column you want.. I hope it helped you.

   text-wrap: normal;
   word-wrap: break-word;
   

Multiline text in a table cell using bootstrap

Changing the pagebreaks to HTML breaks (br tag) works fine in jsfiddle. See my link below. Make sure that when you are generating the HTML you are generating actual < and > symbols, and not the HTML codes.

https://jsfiddle.net/joedonahue/zpj94p0b/

<table id="table1" class="table table-bordered">
    <tbody>
        <tr>
            <th class="col-md-2" scope="row">Description</th>
            <td id="description">Very long test with <br/> so I want to show this in multiline and also want to wrap the text using bootstrap.</td>
        </tr>
    </tbody>
</table>

Making text appear in html table cell with line breaks

This resolved the problem for me:

<pre>@Html.DisplayTextFor(model => model.SpecSelResult.Output)</pre>

Show array of strings as multiline text in mat-table

I have found a new way to solve the issue, the stings in the arrays are joined using myArray.join('\r\n') and in the css, the white-space field is set to pre-line.

How to list multiple lines in a table cell while using python-docx?

Change the text to a single str before assigning it to cell.text:

from docx import Document

list1 = ['this is the first line.\n', 'this is the second line.\n', 'this is the third line.\n']

doc1 = Document()
table1 = doc1.add_table(rows=3, cols=2, style = 'Table Grid')

# --- list of str is joined into single space-separated str ---
table1.cell(2, 1).text = " ".join(list1)

doc1.save('C:\\temps\\doc1.docx')

---

Related Topics