Html 如何设置 <td> 宽度以直观地截断其显示的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/480722/
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
How can I set a <td> width to visually truncate its displayed contents?
提问by John MacIntyre
I'm trying to set a column width of a table, which works fine until it gets to the point where child elements would be visually truncated ... then it won't size any smaller. ("visually truncated"-what doesn't fit appears to be hidden behind the next column)
我正在尝试设置表格的列宽，它可以正常工作，直到它达到子元素在视觉上被截断的程度......然后它的大小不会变小。（“视觉上被截断”-不合适的似乎隐藏在下一列后面）
Here is some sample code to demonstrate my problem:
这是一些示例代码来演示我的问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script language="javascript" type="text/javascript">
var intervalID = null;
function btn_onClick()
{
// keep it simple, only click once
var btn = document.getElementById("btn");
btn.disabled = true;
// start shrinking
intervalID = window.setInterval( "shrinkLeftCell();", 100);
}
function shrinkLeftCell()
{
// get elements
var td1 = document.getElementById("td1");
var td2 = document.getElementById("td2");
// initialize for first pass
if( "undefined" == typeof( td1.originalWidth))
{
td1.originalWidth = td1.offsetWidth;
td1.currentShrinkCount = td1.offsetWidth;
}
// shrink and set width size
td1.currentShrinkCount--;
td1.width = td1.currentShrinkCount; // does nothing if truncating!
// set reporting values in right cell
td2.innerHTML = "Desired Width : ["
+ td1.currentShrinkCount
+ "], Actual : ["
+ td1.offsetWidth + "]";
// Stop shrinking
if( 1 >= td1.currentShrinkCount)
window.clearInterval(intervalID);
}
</script>
</head>
<body>
<table width="100%" border="1">
<tr>
<td id="td1">
Extra_long_filler_text
</td>
<td id="td2">
Desired Width : [----], Actual : [----]
</td>
</tr>
</table>
<button id="btn" onclick="btn_onClick();">Start</button>
</body>
</html>
I've tried setting the width in different ways including
我试过以不同的方式设置宽度，包括
td1.offsetWidth = td1.currentShrinkCount;
and
和
td1.width = td1.currentShrinkCount + "px";
and
和
td1.style.width = td1.currentShrinkCount + "px";
and
和
td1.style.posWidth = td1.currentShrinkCount;
and
和
td1.scrollWidth = td1.currentShrinkCount;
and
和
td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;
and
和
td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;
and
和
td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;
I realize, I could probably use DIV's, but I'd prefer not to since the table is being generated from a bound control, and I don't really want to get into rewriting asp.net controls.
我意识到，我可能可以使用 DIV，但我不想使用，因为表是从绑定控件生成的，而且我真的不想重写 asp.net 控件。
Having said that, I thought as a last ditch effort, I could at least wrap each 'td1's contents with a DIV, and the overflow would take care of things, but even replacing
话虽如此，我认为作为最后的努力，我至少可以用 DIV 包装每个 'td1 的内容，溢出会处理事情，但甚至替换
<td id="td1">
Extra_long_filler_text
</td>
with
和
<td id="td1" style="overflow:hidden;">
<div style="margin=0;padding:0;overflow:hidden;">
Extra_long_filler_text
</div>
</td>
didn't work.
没有用。
Does anybody know how I can set a width to visually truncate its contents?
有人知道如何设置宽度以在视觉上截断其内容吗？
BTW-My target browser is IE7. Other browsers are not important right now, since this is an internal app.
BTW-我的目标浏览器是 IE7。其他浏览器现在并不重要，因为这是一个内部应用程序。
回答by Paolo Bergantino
I just tried adding table-layout: fixed;to the <table>and it worked for me on IE7.
我只是尝试添加table-layout: fixed;到<table>并且它在 IE7 上对我有用。
In a fixed table layout, the horizontal layout only depends on the table's width, the width of the columns, and not the content of the cells
在固定表格布局中，水平布局仅取决于表格的宽度、列的宽度，而不取决于单元格的内容
Check out the documentation.
查看文档。
回答by Sampson
CSS Solution
CSS 解决方案
"Truncate" may not be the word you are looking for. You may just want to hide the overflowing characters. If that is the case, look into the css-property "overflow," which will hide any content extending past the declared limits of its container.
“截断”可能不是您要找的词。您可能只想隐藏溢出的字符。如果是这种情况，请查看 css 属性“溢出”，它将隐藏超出其容器声明限制的任何内容。
td div.masker {
height:25px;
width:100px;
overflow:hidden;
}
<td>
<div class="masker">
This is a string of sample text that
should be hidden when it reaches out of the bounds of the parent controller.
</div>
</td>
Javascript Solution
Javascript 解决方案
If you are indeed wanting to truncate the text within the container, you will have to remove one character from the right, test the width of the parent, and continue to remove characters and testing the parent width until the parent width matches the declared width.
如果确实要截断容器内的文本，则必须从右侧删除一个字符，测试父级的宽度，然后继续删除字符并测试父级宽度，直到父级宽度与声明的宽度匹配。
while (parent.width > desiredWidth) {
remove one char from right-side of child-text
}
回答by Darryl Braaten
<td id="td1" style="overflow-x:hidden;">
Should be
应该
<td id="td1" style="overflow:hidden;">
overflow-x is a Microsoft CSS attribute, which is now part of CSS3. I would stick with the older overflow attribute.
overflow-x 是 Microsoft CSS 属性，现在是 CSS3 的一部分。我会坚持使用旧的溢出属性。
EDIT:
编辑：
As Paolo mentions you also need to add table-layout:fixed; and specify the width of the table. A full example follows.
正如保罗提到的，你还需要添加 table-layout:fixed; 并指定表格的宽度。一个完整的例子如下。
<html>
<head>
<style>
table
{
table-layout:fixed;
width:100px;
}
td
{
overflow:hidden;
width:50px;
border-bottom: solid thin;
border-top:solid thin;
border-right:solid thin;
border-left:solid thin;
}
</style>
</head>
<body>
<table>
<tr><td>Some_long_content</td><td>Short</td></tr>
</table>
</body>
</html>
回答by Robert Venables
As far as I know, a table cell will always stretch to accommodate its contents.
据我所知，表格单元格总是会拉伸以容纳其内容。
Have you thought about using Javascript to dynamically truncate the data in table cells that have more than a certain amount of content? Alternatively, you could do this more easily server side.
你有没有想过使用Javascript来动态截断内容超过一定数量的表格单元格中的数据？或者，您可以更轻松地在服务器端执行此操作。
回答by Hank
You could use jQuery or plain javascript to surround the content of your cell(s) with div tags and set a fixed width and overflow:hidden on those instead. Not beautiful, but it'd work.
您可以使用 jQuery 或普通 javascript 用 div 标签包围单元格的内容，并设置固定宽度和溢出：隐藏在这些标签上。不漂亮，但它会起作用。
ETA:
预计到达时间：
<td><div style="width:30px;overflow:hidden">Text goes here</div></td>
Since the DIV is the bounding element, that's where the width should be set.
由于 DIV 是边界元素，因此应该设置宽度。
