TD元素控制溢出答案

【问题标题】：Control overflow of TD elementTD元素控制溢出
【发布时间】：2011-08-04 15:43:09
【问题描述】：

我的 TD 里面有很长的文字。我希望它被省略，但我不想定义此列的绝对宽度 - 我希望它由其父表动态计算。可能吗？下面是一个代码示例：

<table width="100%" border="3">
<tr>
<td ><span style="white-space: nowrap; overflow: hidden; 
 text-overflow: ellipsis;" >
Here should be very long text: 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</span></td>
</table>

是否有任何方法可以强制 IE 浏览器显示省略号，即使没有定义具有绝对宽度的 'span' 元素，例如：width=300px ？

【问题讨论】：

你愿意使用一些 JavaScript 吗？
顺便说一句 - 在上面的示例中，即使将表格的宽度更改为绝对宽度（例如 width=900px），它也不会改变任何内容，并且表格的大小将超出屏幕大小到单元格文本的长度
关于 javascript - 如果您有建议，请继续，但基本上我更喜欢基于 CSS 和 HTML 布局定义的解决方案

标签： html css ellipsis

【解决方案1】：

您是否尝试过使用-ms-text-overflow？

http://msdn.microsoft.com/en-us/library/ms531174(v=vs.85).aspx

【讨论】：

它不只是 .NET 框架的一部分吗？无论如何，我看不出它如何帮助解决这个用例。
不。 -ms-text-overflow 属性是对 CSS 的扩展，可以在 IE8 模式下使用。

【解决方案2】：

使用 jQuery 的解决方案...

注意：“文本溢出：省略号”似乎在 FF4 中不起作用。

演示：http://jsfiddle.net/vgfDd/1/

$w = $('.setWidth').attr('width');
$('.setWidth').find('span').width($w);

CSS...

table {
    border: 3px solid black;
}

span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

HTML...

<table width="100px" class="setWidth">
    <tr>
        <td>
            <span>
                Here should be very long text: 
                bla bla bla bla bla bla bla
            </span>
        </td>
        <td>
            <span>
                Here should be very long text: 
                bla bla bla bla bla bla bla
            </span>
        </td>
    </tr>
</table>

【讨论】：

【解决方案3】：

不！ IE 不允许更改表格的显示方式，因此如果您不使用像 span 这样的元素，则不会剪切文本。如果您需要使用省略号来剪切文本，则必须使用具有绝对宽度的 span 或 div 等元素。

要自动打开它，您可以使用 JavaScript 或从表格切换到 div。希望对您有所帮助。

【讨论】：

这太荒谬了 - 因为如果我删除属性 'white-space: nowrap' IE 知道要考虑表格的宽度并相应地换行文本。那么为什么它不能做同样的事情，以防文本被剪裁呢？但你可能是对的 - IE 有时会表现得很奇怪

【解决方案4】：

此处概述了纯 CSS 和 JavaScript（无需 jQuery）解决方案：http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

但您需要按照上面 Vismar 的评论包装内容。

【讨论】：

【解决方案5】：

我找到的最佳答案：用定义将 TD 的长内容包装在表中：
'table-layout: fixed' 这将神奇地解决这个问题。

自己看看——

<table width="100%" border="3">
<tr> <td>
<TABLE width=100% cellpadding=0 cellspacing=0 style='table-layout:fixed'><TR>
<TD style='text-overflow: ellipsis; overflow: hidden; white-space: nowrap;'>
Here should be very long text: 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</TD></TR></TABLE>
</td>
</table>

【讨论】：

【解决方案6】：

我发现另一种方法可以在没有 table-layout: fixed.

的情况下使用

使用输入 Value 或 Placeholder 属性将您的上下文放入 td。

然后对输入设置样式，就像无法编辑普通上下文一样。

这将适用于真正灵活的表格 td 宽度。

<table>
  <tr>
    <td>
      <input type="text" value="TitleTitleTitleTitle" />
    </td>
    <td>
      <input type="text" placeholder="ValueValueValueValue" />
    </td>
    <td>
      <input type="text" value="NumberNumberNumberNumber" />
    </td>
  </tr>
</table>
<style>
table{
  width: 100%;
}
td{
  input{
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-user-select: none;
    cursor: default;
  }
}
</style>

【讨论】：

【解决方案7】：

您应该使用<table width="inherit"> 让它从父元素继承其宽度。

【讨论】：

啊哈！谢谢伊尔马里；将来，@Inyavic，请用反引号 (`) 包围任何 HTML 标记，以便它们出现在文本中。没有它，所有上下文都丢失了。