如何设置 <td> 宽度以直观地截断其显示的内容？
Posted
技术标签:
【中文标题】如何设置 <td> 宽度以直观地截断其显示的内容？【英文标题】：How can I set a <td> width to visually truncate its displayed contents? 【发布时间】：2010-10-03 14:28:10 【问题描述】：我正在尝试设置表格的列宽，它可以正常工作，直到它达到子元素在视觉上被截断的程度......然后它的大小不会再变小了。 （“视觉上被截断”——不合适的东西似乎隐藏在下一列后面）
这里有一些示例代码来演示我的问题：
<!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 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>
我尝试过以不同的方式设置宽度，包括
td1.offsetWidth = td1.currentShrinkCount;
和
td1.width = td1.currentShrinkCount + "px";
和
td1.style.width = td1.currentShrinkCount + "px";
和
td1.style.posWidth = td1.currentShrinkCount;
和
td1.scrollWidth = td1.currentShrinkCount;
和
td1.style.overflow = "hidden";
td1.width = td1.currentShrinkCount;
和
td1.style.overflow = "scroll";
td1.width = td1.currentShrinkCount;
和
td1.style.overflow = "auto";
td1.width = td1.currentShrinkCount;
我意识到，我可能会使用 DIV，但我不想这样做，因为表格是从绑定控件生成的，而且我真的不想重写 asp.net 控件。
话虽如此，我认为作为最后的努力，我至少可以用 DIV 包装每个 'td1' 的内容，溢出会处理事情，甚至替换
<td id="td1">
Extra_long_filler_text
</td>
与
<td id="td1" style="overflow:hidden;">
<div style="margin=0;padding:0;overflow:hidden;">
Extra_long_filler_text
</div>
</td>
没用。
有人知道我如何设置宽度以在视觉上截断其内容吗？
顺便说一句-我的目标浏览器是 IE7。其他浏览器目前并不重要，因为这是一个内部应用程序。
【问题讨论】：
欺骗：***.com/questions/426398/… 【参考方案1】：CSS 解决方案
“截断”可能不是您要查找的词。您可能只想隐藏溢出的字符。如果是这种情况，请查看 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 解决方案
如果确实要截断容器内的文本，则必须从右侧删除一个字符，测试父级的宽度，然后继续删除字符并测试父级宽度，直到父级宽度匹配声明的宽度。
while (parent.width > desiredWidth)
remove one char from right-side of child-text
【讨论】：
谢谢乔纳森，你是对的，措辞是错误的。它不会总是文本......我希望能够对单元格中的任何内容执行此操作。它可能是实际的输入控件。 ...但话又说回来，我想，我不一定想用输入控件来做这件事，对吗？ ……让我思考一下。 +1 这很好用，但是你要使用它，你仍然需要设置masker div 的宽度。理想情况下，“掩蔽”将是流动的，由封闭<td> 的宽度决定。【参考方案2】：
<td id="td1" style="overflow-x:hidden;">
应该是
<td id="td1" style="overflow:hidden;">
overflow-x 是 Microsoft CSS 属性，现在是 CSS3 的一部分。我会坚持使用旧的溢出属性。
编辑：
正如 Paolo 所说，您还需要添加 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>
【讨论】：
应该注意，这不会“截断”内容。它只会隐藏溢出。 它可能不起作用，因为它是 CSS3，大多数浏览器还不支持。【参考方案3】：我刚刚尝试将table-layout: fixed; 添加到<table>，它在IE7 上对我有用。
在固定的表格布局中，水平布局只取决于表格的宽度，列的宽度，而不是单元格的内容
查看the documentation。
【讨论】：
【参考方案4】：您可以使用 jQuery 或纯 javascript 将单元格的内容用 div 标签包围，并设置固定宽度并在它们上设置溢出：隐藏。不漂亮，但它会工作。
预计到达时间：
<td><div style="width:30px;overflow:hidden">Text goes here</div></td>
由于 DIV 是边界元素，因此应该设置宽度。
【讨论】：
【参考方案5】：据我所知，表格单元格总是会拉伸以适应其内容。
您是否考虑过使用 Javascript 动态截断内容超过一定数量的表格单元格中的数据？或者，您可以更轻松地在服务器端执行此操作。
【讨论】：
嗯，这是表列大小调整例程的一部分，因此不能在服务器端完成。而且我并不总是知道单元格中的内容，因此它不像在文本停止收缩时删除文本那么简单。不过谢谢。以上是关于如何设置 <td> 宽度以直观地截断其显示的内容？的主要内容，如果未能解决你的问题，请参考以下文章