如何设置 <td>宽度以在视觉上截断其显示的内容? [英] How can I set a <td> width to visually truncate its displayed contents?

查看：22
本文介绍了如何设置 <td>宽度以在视觉上截断其显示的内容?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试设置表格的列宽，它可以正常工作，直到达到子元素在视觉上被截断的程度......然后它的大小不会变小.(视觉上被截断"-不合适的似乎隐藏在下一列后面)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><头><script language="javascript" type="text/javascript">var intervalID = null;函数 btn_onClick(){//保持简单，只点击一次var btn = document.getElementById("btn");btn.disabled = true;//开始收缩intervalID = window.setInterval("shrinkLeftCell();", 100);}函数shrinkLeftCell(){//获取元素var td1 = document.getElementById("td1");var td2 = document.getElementById("td2");//初始化第一遍if(未定义"== typeof(td1.originalWidth)){td1.originalWidth = td1.offsetWidth;td1.currentShrinkCount = td1.offsetWidth;}//缩小并设置宽度大小td1.currentShrinkCount--;td1.width = td1.currentShrinkCount;//如果截断，则什么都不做！//在右侧单元格中设置报告值td2.innerHTML = "所需宽度:["+ td1.currentShrinkCount+ "], 实际: ["+ td1.offsetWidth + "]";//停止收缩如果(1 >= td1.currentShrinkCount)window.clearInterval(intervalID);}<身体><table width="100%" border="1"><tr><td id="td1">Extra_long_filler_text</td><td id="td2">所需宽度:[----]，实际:[----]</td></tr><button id="btn" onclick="btn_onClick();">开始</button>

我尝试以不同的方式设置宽度，包括

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 = "隐藏";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 的内容，溢出会处理事情，但即使替换

Extra_long_filler_text</td>

与

<div style="margin=0;padding:0;overflow:hidden;">Extra_long_filler_text

</td>

没有用.

有谁知道我如何设置宽度以在视觉上截断其内容?

顺便说一句-我的目标浏览器是 IE7.其他浏览器目前并不重要，因为这是一个内部应用.

解决方案

我刚刚尝试将 table-layout: fixed; 添加到

并且它起作用了对于 IE7 上的我.

<块引用>

在固定表格布局中，水平布局只取决于表格的宽度，列的宽度，而不是单元格的内容

查看文档.

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.

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

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

解决方案

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.

这篇关于如何设置 &lt;td&gt;宽度以在视觉上截断其显示的内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆
友情链接： IT屋 Chrome插件 谷歌浏览器插件
IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.