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浏览器，即使没有与例如绝对宽度定义“跨度”元素来显示省略号：宽度= 300像素？

Answer 1

最佳答案我发现： 与定义包裹TD的长期内容表：
“表格的布局：固定”这会奇迹般地解决了这个问题。

看到自己 -

<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

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

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

Answer 3

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

没有！ IE不允许改变表格的显示方式，所以如果你不使用像span这样的元素，文本将不会被剪切。如果您需要使用省略号来剪辑文本，则必须使用绝对宽度的跨度或div等元素。

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

Answer 5

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

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

Answer 6

我找到了另一种方式工作没有表格的布局：固定。

把你的背景下进入使用输入价值或占位属性的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 7

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