Question

我有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？

Answer 1

我找到的最佳答案：将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>

Answer 2

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

要自动启用它，您可以使用JavaScript或从表格切换到div。我希望这会对你有所帮助。

Answer 3

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

的情况下工作

使用输入值或占位符属性将您的上下文放入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>

Answer 4

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

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

Answer 5

使用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>

Answer 6

这里概述了一个纯CSS和JavaScript（不需要jQuery）解决方案：http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript

但是你需要根据上面的Vismari评论包装内容。

Answer 7

您应该使用<table width="inherit">来继承父元素的宽度。

控制TD元素的溢出

7 个答案: