У меня есть div с некоторым текстом:
<div style="white-space:nowrap;overflow:none;width:50px;">
With some text in it
</div>
Как я могу масштабировать размер шрифта для текста, чтобы весь текст был видимым?
У меня есть div с некоторым текстом:
<div style="white-space:nowrap;overflow:none;width:50px;">
With some text in it
</div>
Как я могу масштабировать размер шрифта для текста, чтобы весь текст был видимым?
В отличие мудр. Вы можете обернуть текст в интерьер DIV, измерить его ширину с помощью JavaScript. Проверьте, является ли эта ширина шире родительского DIV. Получите текущий размер шрифта и постепенно увеличивайте его на 1px за раз, пока внутренняя ширина DIV не будет меньше или равна внешней ширине DIV.
Я делал что-то вроде этого, чтобы установить шкалу текста относительно ширины/высоты родительского (или окна). Вы можете избежать jQuery, используя offsetWidth и offsetHeight вместо ширины.
var setBodyScale = function () {
var scaleSource = $(window).width(), // could be any div
scaleFactor = 0.055,
maxScale = 500,
minScale = 75; //Tweak these values to taste
var fontSize = (scaleSource * scaleFactor) - 8; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('html').css('font-size', fontSize + '%'); // or em
}
Пришел к этому плагину JQuery в моем поиске, чтобы найти то же самое.
И наткнулся на этот JQuery script, когда я искал то же самое. У этого есть дополнительное преимущество над другими, насколько я могу сказать, что он также настраивается для высоты, а также ширины.
Приходит отсюда: http://www.metaltoad.com/blog/resizing-text-fit-container
function adjustHeights(elem) {
var fontstep = 2;
if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) {
$(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px');
adjustHeights(elem);
}
}
Короткий ответ: нет.
Вам нужно будет попробовать размер, отобразить его, посмотреть, подходит ли он, попробовать другой размер, визуализировать его, если он подходит, и т.д. Тогда вам придется обрабатывать случай, когда рассчитанный размер шрифта настолько мал, что никто не может прочитайте текст.
Существуют и другие варианты, если текст не подходит, добавьте эллипсис (...) в конец текста, когда вы нажмете на него, div может расширяться, вы можете использовать всплывающее окно или всплывающую подсказку с полным текстом или поместить полный текст в большую область экрана.
Найдите другой способ.