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

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();

请注意，我必须在单元格中添加一个跨度，因为 jquery 的 TD 宽度计算效果不太好。