Question

我试图保持这个范围内的文本不会离开td。有没有办法做到这一点？

<table style="height:62px; overflow:hidden; border-style:solid; border-width:thick; table-layout:fixed; width:100%">
    <tbody>
        <tr>
            <td style="width:256px"></td>
            <td valign="top" style="border-style:solid; border-width:thick"> <span style="font-size:20px;">
                    wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
                </span>

            </td>
            <td style="width: 180px"></td>
        </tr>
    </tbody>
</table>

http://jsfiddle.net/vqr4n/1/

Answer 1

将overflow:hidden;text-overflow:ellipsis;添加到您的表格单元格中。

<强> jsFiddle example

Answer 2

打破它：

td{ word-wrap: break-word; }

隐藏它：

td{ overflow: hidden; text-overflow:ellipsis; }

有关text-overflow的更多信息。

Answer 3

您可以使用

.crop 
{
  width:100px;
  overflow:hidden;
  height:50px;
  line-height:50px;
}

强制<span>留在</span>

3 个答案: