代码之家 › 专栏 › 技术社区 › John MacIntyre

如何设置<td>宽度以直观地截断其显示内容?

column-sizing column-width html-table css html

John MacIntyre · 技术社区 · 17 年前

我正在尝试设置一个表的列宽,在它到达子元素被视觉截断的点之前,它可以正常工作。。。那它就不会再小了。(“视觉截断”-不合适的内容似乎隐藏在下一列后面)

下面是一些示例代码来演示我的问题:

<!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>

我试过用不同的方法设置宽度,包括

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控件。

<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。其他浏览器目前并不重要,因为这是一个内部应用程序。

5 回复 | 直到 9 年前

Paolo Bergantino 17 年前

table-layout: fixed; 到 <table> 这在IE7上对我很有效。

在固定表布局中,水平布局仅取决于表的宽度、列的宽度,而不取决于单元格的内容

the documentation .

Paolo Moretti 14 年前

“Truncate”可能不是您要查找的词。您可能只想隐藏溢出的字符。如果是这种情况,请查看css属性“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解决方案

如果确实要截断容器中的文本,则必须从右侧删除一个字符,测试父级宽度,然后继续删除字符并测试父级宽度,直到父级宽度与声明的宽度匹配。

while (parent.width > desiredWidth) {
  remove one char from right-side of child-text
}

Darryl Braaten 17 年前

<td id="td1" style="overflow-x:hidden;">

<td id="td1" style="overflow:hidden;">

overflow-x是一个Microsoft CSS属性,它现在是CSS3的一部分。我会坚持使用旧的溢出属性。

编辑:

正如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>

Robert Venables 17 年前

据我所知,表格单元格总是会拉伸以容纳其内容。

Hank 17 年前

您可以使用jQuery或纯javascript用div标记包围单元格的内容,并设置固定的宽度和溢出:在这些标记上隐藏。不漂亮,但它会有用的。

预计到达时间:

<td><div style="width:30px;overflow:hidden">Text goes here</div></td>