Changing text wrapping behavior in HTML table

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.

---

使用WORD-BREAK:BREAK-ALL;风格WORD-BREAK:BREAK-ALL;

---

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>

---

我通过将宽度设置为表格单元格中的一个像素来解决此问题，我想强制自动换行。

链接地址: http://www.djcxy.com/p/88102.html

上一篇: 如何在固定宽度范围内打包或打破长文本/单词？

下一篇: 更改HTML表格中的文字环绕行为