Вопрос по html-table, html, css, javascript – Узнайте эффективную ширину элемента и измените размер текста в нем

2

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

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

@Praveen Я удалил ваше добавление в тегах & quot; выражения & quot; : OP не уточнил, что он хотел именно их. Denys Séguret
Вы хотите найти его с помощью JavaScript? kinakuta

Ваш Ответ

2   ответа
0

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

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

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

CSS-выражения совместимы только с Internet Explorer, и даже Microsoft давно их отбросила.stackoverflow.com/questions/3810478/…
3

Это может быть сделано в 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 работает не очень хорошо.

Я немного отредактировал ваш JS, потому что у Interval слишком много времени, поэтому пользователь видит взаимодействие. При этом все работает очень хорошо: var fontSize = 20; var redu = function () {while ($ ("# txt"). width () & gt; 200) {fontSize - = 1; $ ("# txt"). css ("font-size", fontSize); } $ ('a #; mes' a.). html (fontSize); }; уменьшения (); Florian Müller
Этот ответ является идеальным кандидатом для улучшения с помощью бинарного поиска.
ХОРОШО. Вы можете редактировать мой ответ напрямую, если считаете, что это может быть полезно для других людей.

Похожие вопросы