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，但我宁愿不使用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.
我的目标浏览器是IE7。其他浏览器现在并不重要，因为这是一个内部应用。
5 个解决方案
#1
30
I just tried adding table-layout: fixed; to the <table> and it worked for me on 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.
查看文档。
#2
4
CSS Solution
"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.
“Truncate”可能不是你要找的词。您可能只想隐藏溢出的字符。如果是这种情况，请查看css-property“overflow”，它将隐藏超过其容器声明的限制的任何内容。
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
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
}
#3
2
<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的一部分。我将坚持使用旧的overflow属性。
EDIT:
编辑:
As Paolo mentions you also need to add table-layout:fixed; and specify the width of the table. A full example follows.
正如Paolo提到的，你还需要添加表格布局:固定;并指定表的宽度。下面是一个完整的示例。
<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>
#4
1
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动态截断包含一定内容的表单元格中的数据?或者，您也可以更容易地使用服务器端。
#5
0
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是边框元素，所以应该在这里设置宽度。
#1
30
I just tried adding table-layout: fixed; to the <table> and it worked for me on 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.
查看文档。
#2
4
CSS Solution
"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.
“Truncate”可能不是你要找的词。您可能只想隐藏溢出的字符。如果是这种情况，请查看css-property“overflow”，它将隐藏超过其容器声明的限制的任何内容。
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
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
}
#3
2
<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的一部分。我将坚持使用旧的overflow属性。
EDIT:
编辑:
As Paolo mentions you also need to add table-layout:fixed; and specify the width of the table. A full example follows.
正如Paolo提到的，你还需要添加表格布局:固定;并指定表的宽度。下面是一个完整的示例。
<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>
#4
1
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动态截断包含一定内容的表单元格中的数据?或者，您也可以更容易地使用服务器端。
#5
0
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是边框元素，所以应该在这里设置宽度。