Html 控制TD元素溢出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5648663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Control overflow of TD element
提问by Spiderman
I have got TD with long text in it. I'd like it to be ellipsised, but I don't want to define the absolute width of this column - I want it to be calculated dynamically by its parent table. Is it possible? Here is a code for example:
我得到了带有长文本的 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>
Is there any way to force IE browser to display ellipsis even without defining the 'span' element with absolute width for example: width=300px ?
有没有办法强制 IE 浏览器显示省略号，即使没有定义具有绝对宽度的 'span' 元素，例如： width=300px ？
回答by Spiderman
The best answer I found:
wrapping the long content of the TD in table with the definition:
'table-layout: fixed' This will magically solve this issue.
See for yourself -
我找到的最佳答案：用定义将 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>
回答by Vismari
No! IE does not allow changing the way the table is displayed, so if you don't use an element like a span the text won't clipped. If you need put ellipsis to clip the text you must use an element like a span or div with absolute width.
不！IE 不允许更改表格的显示方式，因此如果您不使用跨度之类的元素，则文本不会被剪裁。如果您需要使用省略号来剪辑文本，则必须使用具有绝对宽度的元素，例如 span 或 div。
To turn it automatically you can use JavaScript or switch from table to div's. I hope this helps you.
要自动打开它，您可以使用 JavaScript 或从 table 切换到 div。我希望这可以帮助你。
回答by Oliver
I found another way works without table-layout: fixed.
我发现另一种没有表格布局的方法：固定。
Put your context into an td using input Valueor Placeholderattribute.
使用输入值或占位符属性将您的上下文放入 td 中。
Then Style the input Like a normal context can't be edit.
然后将输入样式设置为无法编辑正常上下文。
This will works with a true flexible table td width.
这将适用于真正灵活的表格 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>
回答by two7s_clash
A pure CSS and JavaScript (no jQuery needed) solution is outlined here: http://www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript
此处概述了纯 CSS 和 JavaScript（不需要 jQuery）解决方案：http: //www.ruzee.com/blog/2007/08/ellipsis-or-truncate-with-dots-via-javascript
But you'll need to wrap the content per Vismari's comment above.
但是您需要根据上面 Vismari 的评论来包装内容。
回答by two7s_clash
Have you tried using -ms-text-overflow?
你试过使用-ms-text-overflow吗？
http://msdn.microsoft.com/en-us/library/ms531174(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/ms531174(v=vs.85).aspx
回答by wdm
Solution using jQuery...
使用jQuery的解决方案...
Note: "text-overflow: ellipsis" doesn't seem to be working in FF4.
注意：“文本溢出：省略号”似乎在 FF4 中不起作用。
Demo: http://jsfiddle.net/vgfDd/1/
演示：http: //jsfiddle.net/vgfDd/1/
$w = $('.setWidth').attr('width');
$('.setWidth').find('span').width($w);
CSS...
CSS...
table {
border: 3px solid black;
}
span {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
HTML...
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>
回答by Inyavic
You should use <table width="inherit">for it to inherit its width from the parent element.
您应该使用<table width="inherit">它从父元素继承其宽度。
