Я не был влюблен в другие решения, так что вот еще одно. Требуется тег, размер которого вы изменяете внутри:
Фиксированная высота
Не так долго, чтобы оно перешло границы в 10 пикселей - идея в том, что вы не хотите, чтобы он стрелял ниже этого и изменял размер текста, чтобы стать нечитаемым. Не проблема в нашем случае использования, но если это возможно в вашем случае, вы бы хотели подумать об отдельном усечении перед запуском этого.
Он использует бинарный поиск, чтобы найти лучший размер, поэтому я подозреваю, что он превосходит многие другие решения здесь и в других местах, которые просто уменьшают размер шрифта на пиксель снова и снова. В настоящее время большинство браузеров также поддерживают десятичные дроби в размерах шрифтов, и этот сценарий имеет некоторые преимущества, поскольку он будет в пределах .1px от лучшего ответа, каким бы он ни был, даже если это относительно длинный десятичный знак. Вы можете легко изменить max - fontSize < .1 на другое значение, отличное от .1, чтобы получить меньшую точность при меньшем использовании ЦП.
Использование:
$('div.event').fitText();
Код:
(function() {
function resizeLoop(testTag, checkSize) {
var fontSize = 10;
var min = 10;
var max = 0;
var exceeded = false;
for(var i = 0; i < 30; i++) {
testTag.css('font-size', fontSize);
if (checkSize(testTag)) {
max = fontSize;
fontSize = (fontSize + min) / 2;
} else {
if (max == 0) {
// Start by growing exponentially
min = fontSize;
fontSize *= 2;
} else {
// If we're within .1px of max anyway, call it a day
if (max - fontSize < .1)
break;
// If we've seen a max, move half way to it
min = fontSize;
fontSize = (fontSize + max) / 2;
}
}
}
return fontSize;
}
function sizeText(tag) {
var width = tag.width();
var height = tag.height();
// Clone original tag and append to the same place so we keep its original styles, especially font
var testTag = tag.clone(true)
.appendTo(tag.parent())
.css({
position: 'absolute',
left: 0, top: 0,
width: 'auto', height: 'auto'
});
var fontSize;
// TODO: This decision of 10 characters is arbitrary. Come up
// with a smarter decision basis.
if (tag.text().length < 10) {
fontSize = resizeLoop(testTag, function(t) {
return t.width() > width || t.height() > height;
});
} else {
testTag.css('width', width);
fontSize = resizeLoop(testTag, function(t) {
return t.height() > height;
});
}
testTag.remove();
tag.css('font-size', fontSize);
};
$.fn.fitText = function() {
this.each(function(i, tag) {
sizeText($(tag));
});
};
})();
http://jsfiddle.net/b9chris/et6N6/1/