Динамическое изменение размера шрифта, чтобы он помещался в контейнере - PullRequest
Новая
       22

Динамическое изменение размера шрифта, чтобы он помещался в контейнере

0 голосов
/ 29 августа 2018

Я пытаюсь написать функцию, которая может изменить размер динамического текста, чтобы он никогда не пролился за пределы контейнера.

Текст будет иметь стандартный размер 20 пикселей, который будет установлен в CSS, но затем, если длина текста увеличивается (динамически), я хочу, чтобы размер текста уменьшался до размера контейнера.

В моем коде я использую textContent.offsetWidth, проверяя, превышает ли он ширину / высоту контейнера. Если это так, уменьшите размер шрифта с помощью цикла while.

Синтаксис выглядит правильно, но я думаю, что я запутался, должен ли я использовать offsetWidth или clientWidth, чтобы сделать сравнение, поэтому причина его не работает.

HTML:

<div id="headline-2-container" style=""> <span id="headline-2" style="">This sedfdg d f dfgdfg dfdfg fdg fdg dfg dfg dfgd fkjfkjdfngkjdfngk jndfjng </span> </div>

Вот мой JS: 

var textContent = document.getElementById('headline-2');
var textContainer = document.getElementById('headline-2-container');             

var divWidth = textContainer.clientWidth;
var divHeight = textContainer.clientHeight;

var contentWidth = textContent.offsetWidth;
var contentHeight = textContent.offsetHeight;

var fontSize = text.style.fontSize;
fontSize = Number(fontSize.substring(0, fontSize.length - 2));

console.log(text2);
console.log(cont2);

while (contentHeight > divHeight) {

fontSize -= 1;

text.style.color = "red";
text.style.fontSize = fontSize + "px";
}

Любая помощь с этим будет оценена.

Предпочел бы использовать только JS, а не JQuery или любые другие библиотеки для этого.

JSFiddle link: https://jsfiddle.net/nolimit966/c4wtezyd/61/

...