Узнайте эффективную ширину элемента и измените размер текста в нем

Я хотел бы узнать ширину TD, которая определилаstyle='width: 200px;, но текст делает его длиннее (без перерыва). Я хочу узнать эффективную ширину и, если она больше 200 пикселей, каждый раз уменьшать размер текста примерно на 2 пикселя.

Это вообще возможно?

Ответы на вопрос(2)

Решение Вопроса

Это может быть сделано в 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();

Заметьте, что мне пришлось добавить диапазон в ячейку, потому что вычисление ширины TD с помощью jquery работает не очень хорошо.

Вам нужен JavaScript, чтобы сделать это. Но если вы хотите сделать это, используя только CSS, вы можете использовать выражения CSS сexpression.

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

Надеюсь, поможет! :)

Ваш ответ на вопрос