Question

我正在使用CSS，但为了快速测试，我只是使用内联样式。这是我试图实现的代码：

echo "<td style='height=10px; width=10px;'>";

它确保单元格的最大宽度为10px，但高度随文本溢出而变得非常大（高）。

我想要实现的是该单元格中任何超过30个字符的信息，我想隐藏所以你看不到它。

（我知道30个字符超过10px，但我只是在玩，看它是否有效！）

Answer 1

您的语法错误：

不好

echo "<td style='height=10px; width=10px;'>";

好

echo "<td style='height:10px; width:10px;'>";

但是，这并不能解决问题。我阅读spec的方式，只允许固定布局表在溢出时剪切其内容（而不是调整大小以适应它）。

更好/更简单的方法是使用DIV。

请参阅此示例：http://jsfiddle.net/Aa4JL/

但是，如果您的数据是表格式的，并且您需要使用表格，则可以通过将单元格的内容包装在DIV中来实现相同的效果。

<table>
    <tr>
     <td><div style='height:10px; width:10px; overflow: hidden;'>This text is clipped.</div></td>         
    </tr>
</table>

请注意，如果您不关心基于高度的剪裁，则可以使用结合white-space: nowrap和text-overflow: ellipsis的固定布局表来实现漂亮的椭圆效果。这不需要使用DIV包装内容。请注意，省略号效果仅适用于较新的浏览器（内容仍应在较旧的浏览器中剪辑）。

<table style="table-layout:fixed;width:50px;">
    <tr>
     <td style='width:50px; overflow: hidden; white-space:nowrap; text-overflow: ellipsis;'>Long string of text with nice ellipses effect.</td>         
    </tr>
</table>

这个小提琴有我刚才描述的所有技巧：http://jsfiddle.net/Aa4JL/4/

Answer 2

您可以使用文字溢出。 This是使用text-overflow:ellipsis的示例。我只是通过复制上述示例中的代码在jsfiddle上创建了一个示例。

Answer 3

我认为你不能这样做.. html只定义单元格的基本大小，这意味着如果你没有任何文本，单元格的大小。如果你的文字较大，那么单元格就不会阻止它。

更好的方法来做你想要做的就是使用php和substring（）函数..

如果有帮助或者您需要帮助，请告诉我

Answer 4

如果将td内容包装在div：

中，似乎可行

演示：http://jsfiddle.net/LUmNc/

Answer 5

html属性也应该用双引号定义，例如

echo "<td style=\"height:10px; width:10px;\">";

Answer 6

<style type="text/css">
td {
    overflow-x: hidden;

}
</style>

为什么我不能在HTML表格中指定单元格的宽度和高度？

6 个答案: