html - TD元素控制溢出

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 浏览器显示省略号，例如：width=300px？

Answer 1

我找到的最佳答案：用定义将 TD 的长内容包装在 table 中：
' 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

我发现另一种没有表格布局的方法：已修复。

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

Answer 3

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

要自动打开它，您可以使用 JavaScript 或从表切换到 div。我希望这可以帮助你。

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

但是您需要根据上面 Vismar 的评论来包装内容。

Answer 7

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