Question

我想找出已经定义style='width: 200px;的TD的宽度，但文本会使它更长（没有中断）。我想找出有效宽度，并且只要它大于200px，每次缩小文本大小约2px。

这有可能吗？

Answer 1

这可以在javascript中完成，但它有点复杂。

以下是完整的工作示例：http://jsfiddle.net/dystroy/kdrrA/

HTML：

<table><tr><td id=txtcell nowrap><span id=txt>My long text is long. My long text.</span></td></tr></table>
<br>Font Size : <span id=mes></span>

CSS：

#txtcell{ max-width:200px;}

javascript：

var fontSize = 20; 
var reduce = function() { 
    while ($('#txt').width() > 200) { 
        fontSize -= 1; 
        $('#txt').css('font-size', fontSize); 
    }
    $('#mes').html(fontSize); // this line is only for demonstration, remove it in "production"
}; 
reduce();

请注意，我必须在单元格中添加一个span，因为jquery的TD宽度计算不能很好地工作。

Answer 2

你需要JavaScript来实现它。但是如果你想单独使用CSS，你可以使用带有expression的CSS表达式。

td {width: expression(this.style.width);}

希望它有所帮助！：）

找出元素的有效宽度并调整其中的文本大小

2 个答案: