Changing text wrapping behavior in HTML table

Question

I have an HTML table in which one particular cell can have long text (up to a paragraph). Is there a way to change the way text wraps in that cell so that if it is long enough to stretch the table horizontally it instead wraps and possibly stretches the table vertically? I want the width of the column to be determined dynamically by the rest of the cells in the column as it would be if there was no text in that cell.

Clarification: I want the width of the cell with potentially long text to be determined entirely by the widths of the other cells in the columns, with the text in it wrapped to fit within that width. I do not want to have a static column width or max column width because the page is generated dynamically with data from a database.

Example:

<table>
    <tr><td>Test Test Test</td></tr>
    <tr><td class="X">Test Test Test Test Test Test Test Test Test</td>
</table>

Where "X" denotes the cell that should wrap when possible

The default behavior is

|--------------------------------------------|
|Test Test Test Test                         |
|--------------------------------------------|
|Test Test Test Test Test Test Test Test Test|
|--------------------------------------------|

I want it to instead do

|-------------------|
|Test Test Test Test|
|-------------------|
|Test Test Test Test|
|Test Test Test Test|
|Test               |
|-------------------|

Even if this is smaller than the width of the screen. I am wondering if it is possible to do this without knowing the width of any of the text when I create the table.

Kanchana Randika · Accepted Answer · 2011-06-17 16:47:21Z

2

Use the style WORD-BREAK:BREAK-ALL;

answered Jun 17, 2011 at 16:47

Kanchana Randika

5462 gold badges13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

murgatroid99 Over a year ago

This did not work: it wrapped words at the end of lines, but only after stretching the table to the width of the screen.

Hux · Accepted Answer · 2011-06-18 11:53:14Z

1

As far as i'm aware, word-wrap: break-word; will not work within a table unless the you also use table-layout:fixed.

I don't entirely understand what you are asking for. You say that you want a cell to take up width based on it's content, stretch accordingly and overflow where possible. this is what a table does. it is the default behaviour of a table. The only case where this does not apply, is when you have a really long word with no gaps in it. This will cause the table to expand, regardless. Strange behaviour, I know.

If you have the latter scenario, you have to use a fixed width table. Take the following example:

    <table style="width:250px;">
        <tr>
            <td>Test</td>
            <td>Test Test Test Test Test Test Test Test Test</td>
            <td>TestTestTestTestTestTestTestTestTestTestTest</td>
            <td>Test Test Test Test Test Test Test Test Test</td>
        </tr>
    </table>

Notice here, that the table will accommodate all the room it needs, due to the middle column. Now, change the table mark-up to the following:

    <table style="width:250px; table-layout:fixed">

Now, the table will be 250px but the middle column will spill out into the next cell (A bit crazy, I know). Now, we can use word-wrap:break-word to make the middle column wrap. Adding this to the table declaration will create the expected output.

UPDATE

So, I don't think this is possible with CSS. The problem is, you want the table to be as wide as the widest column except for cell X. To do this within a table, we can write a bit of jQuery to calculate the width of the table:

(Notice I have added a <span> to the <td> to get the actual width of the content. This can be substituted for other elements)

    <script type="text/javascript">
        $(function() {
            var widths = $('table td').map(function() { 
                return $("span", this).width();
            }).get();

            var biggest = Math.max.apply(Math, widths);
            $("table").width(biggest + "px");
        });
    </script>
    <table>
        <tr><td><span>Test Test Test Test</span></td></tr>
        <tr><td class="X">Test Test Test Test Test Test Test Test Test</td>
        <tr><td><span>Test Test Test Test Test Test</span></td></tr>
    </table>

edited Jun 18, 2011 at 11:53

answered Jun 17, 2011 at 18:46

Hux

3,1321 gold badge29 silver badges35 bronze badges

6 Comments

murgatroid99 Over a year ago

Thanks for trying. In the table I have, with content that I do not know when I am creating the formatting, I want the column to stretch based on the content of every cell in the column except cell X, and I want cell X to not cause the table to stretch and for the content of cell X to wrap like normal text instead of stretching the table. I know that is not the default behavior; I would like to know if it is possible anyway.

Hux Over a year ago

Cell X would not cause the table to stretch. This is as mentioned above. The table will stretch if no width is specified on the table itself. Try adding a width to the table. I don't know what else to suggest without an example.

murgatroid99 Over a year ago

@MiG I added an example to illustrate what I want to do.

Hux Over a year ago

Right, I'm with it now. I don't think this is possible with straight CSS. I will update my answer to suit

murgatroid99 Over a year ago

@MiG Thank you for your help. I did not manage to get your code working, but I managed to find my own solution.

|

murgatroid99 · Accepted Answer · 2011-06-20 15:14:42Z

1

I solved this by setting the width to one pixel in the table cell I wanted to have forced word wrap.

answered Jun 20, 2011 at 15:14

murgatroid99

20.4k10 gold badges65 silver badges98 bronze badges

Comments

ngen · Accepted Answer · 2011-06-17 16:40:06Z

0

Use nowrap. If you remove that from the <td> tag, you'll see it will wrap again.

http://jsfiddle.net/yhFk9/

answered Jun 17, 2011 at 16:40

ngen

8,9662 gold badges21 silver badges15 bronze badges

5 Comments

murgatroid99 Over a year ago

What I want is actually the opposite: I want it to wrap instead of widening the table to fill the page.

ngen Over a year ago

Ah, well without specifying a width for the cell I don't know how it will know when to start wrapping for that cell specifically.

murgatroid99 Over a year ago

@ngen The idea is that the width would be determined by the maximum width of the other cells in the column.

ngen Over a year ago

Isn't the maximum width of the other cells determined by the maximum width of the second to largest cell?

murgatroid99 Over a year ago

@ngen I tried to clarify in my question what I am asking for.

Collectives™ on Stack Overflow

Changing text wrapping behavior in HTML table

4 Answers 4

1 Comment

6 Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

6 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related