css - 如何在表格单元格的宽度为 100% 的段落中只显示一行文本？

Question

我有一个例子：

<table class="border" style="width:100%">
<tr>
    <td style="width:30%" class="border p10">
        Test
    </td>
    <td style="width:70%" class="border p10">
        <p class="longText">
        Looong text Looong text Looong text Looong text Looong text Looong text Looong text Looong text
        </p>
    </td>
</tr>

CSS：

.longText {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:100%
}

.border {border: solid 1px #ccc}
.p10 {padding: 10px}

你可以在这里试试http://jsfiddle.net/rnwCw/20/

问题是长文本破坏了单元格的宽度（30% 和 70%）。如果我将 .longText 的宽度设置为 PX，例如 200px，那么表格就可以了。但我需要 <P> 占用 100% 的单元格。如何解决这个问题呢？

Answer 1

你应该申请table-layout:fixed：

table {
    table-layout:fixed;
}

请在此处查看小提琴：http: //jsfiddle.net/hARt5/这是您希望达到的结果吗？现在表格行有 30/70 的比例。

Answer 2

删除 有助于逐字换行的white-space:nowrap;添加。word-wrap

.longText {
    overflow:hidden; 
    text-overflow:ellipsis;width:100%;
    word-wrap:break-word;
}

Answer 3

100% 将占用整个浏览器宽度，具体取决于您的显示器。如上所述，您使用 table-layout:fixed 或使用 px 而不是 % 在任何显示器分辨率上修复您的表格