如何在段落中只显示一行文字,宽度为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.