html - 文本溢出 : ellepsis not working

Question

我有这张表，我想稍微修饰一下，但尽管我在 Stackoverflow 中找到了各种解决方案，但还是没有成功。

我正在使用 PHP 回显表格，其中包含来自 SQL 数据库的一些数据。

正如您在右下角看到的，浏览器看不到我为溢出等添加的样式。

下面是html:

<div class="span9">
    <div class="container">
        <a class="btn" href="records.php">Add New Record</a><br><br>
        <table class="table table-hover table-condensed" border="1" cellpadding="10">
            <tbody>
                <tr> 
                    <th class="th.id"><a href="?orderby=id">ID</a></th> 
                    <th class="th.status"><a href="?orderby=status">Status</a></th> 
                    <th class="th.cust"><a href="?orderby=customer">Customer</a></th> 
                    <th class="th.prod"><a href="?orderby=product">Product</a></th> 
                    <th class="th.ord">Order Number</th> 
                    <th class="th.ret">Return Code</th> 
                    <th class="th.dop"><a href="?orderby=dop">Date of Purchase</a></th> 
                    <th class="th.sn">Serial Number</th> 
                    <th class="th.prob">Problem Description</th> 
                    <th class="th.rep">Repair Description</th> 
                    <th class="th.part">Parts Used</th> 
                    <th class="th.com">Comments</th> 
                </tr>
                <tr>
                    <td><p><a href="records.php?id=1">1</a></p></td>
                    <td><p>Error!</p></td>
                    <td><p>Jesse</p></td>
                    <td><p>Fuse</p></td>
                    <td><p></p></td>
                    <td><p></p></td>
                    <td><p></p></td>
                    <td><p>ComicalCanary</p></td>
                    <td><p>Not enough sand</p></td>
                    <td><p>Added sand</p></td>
                    <td><p>sand 10kg</p></td>
                    <td><p>I want to put a lot of content into this, to see how far this will go in stretching the table.</p></td>
                </tr>
        </tbody>
    </table>
</div>

下面是我的 css，我使用的是 Bootstrap 3.3.7，但这是我要添加的内容:

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    table-layout: fixed;
}
.table td {
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

甚至宽度:120px；甚至不工作... 有任何线索吗？

Answer 1

您必须将 ellipsis 样式向下移动到 p 标记。

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

https://jsfiddle.net/koralarts/y6q3uvkL/1/