根据内容溢出更改表格单元格内容答案

【问题标题】：Change table cell contents based on content overflow根据内容溢出更改表格单元格内容
【发布时间】：2013-07-02 02:48:13
【问题描述】：

有没有办法确定表格单元格的内容是否会溢出（即换行到单元格中的另一行），如果是，请更改内容？

我有一张表格，其中一个单元格用于“评论”字段。如果评论足够短，只能显示在字段中，我想只显示文本。但是，如果评论太长，我会在单元格中放置一个小图标，以便在 Bootstrap 弹出窗口中显示完整评论。

我猜我必须用内容填充单元格，以某种方式检查溢出，然后用我的 Bootstrap 弹出窗口代码覆盖单元格，但我只是不确定如何检查内容是否将“适合”在单元格中与否。

【问题讨论】：

对您的 HTML 代码有一点帮助会更好，或者是一个小提琴，这样我们就可以处理它......
你可以用一些简单的 javascript 来做你想做的事：stackoverflow.com/questions/4880381/… 但实际上，从 UI 的角度来看。如果它溢出，总是将评论的 1 行与 ... 或 read more 一起放置不是更有意义吗？太长了为什么要完全隐藏？
DMoses- 我绝对认为你是对的，这是更好的 UI，但我认为确定单元格是否溢出比确定它溢出的点更简单。就像我在下面的解决方案中留下的评论一样，你知道如何确定在哪里拆分单元格的内容，以确保它不会溢出吗？

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

要么设置单元格的高度并设置overflow:hidden;，这有点难看，要么将长注释拆分并将多余的内容放入隐藏跨度并使用jquery显示隐藏它

fiddle

HTML

<table>
    <tr>
        <td valign="top" width="100px" >comment 1:</td>
        <td class="smallComment">Blah blah blah blah blah blah blah blah blah blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blah</td>       
    </tr>
        <tr>
        <td valign="top" width="100px">comment 2:</td>
            <td class="comment2">Blah blah blah blah blah blah blah blah blah blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah <span class="more">blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blah</span></td>       
    </tr>
        <tr>
        <td valign="top" width="100px" >comment 1:</td>
        <td>Blah blah blah blah blah blah blah blah blah blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blah</td>       
    </tr>
</table>

CSS

.smallComment {
   display:block; 
   height:30px; 
   overflow:hidden;
}
.more {
    display:none;
}

JAVASCRIPT

jQuery(document).ready(function() {
    jQuery(".comment2").click(function() {

        jQuery(this).find(".more").slideToggle(600);
    });
});

【讨论】：

这个解决方案看起来很合理，但我认为我的问题是以编程方式确定在哪里切断文本？