Изменить размер шрифта по контейнеру

Я пытался использовать предыдущие посты на этом сайте и поиск в гугле, но что-то упускаю.

var divContainer = ws_popupWindows.document.getElementById('sw_content');

divContainer.innerHTML = '<div id="sw_resize">' + msgTEXT.innerHTML + '</div>';

var spanContainer = ws_popupWindows.document.getElementById('sw_resize');
for (var newSize = 100; (newSize -= 10) && (divContainer.clientWidth < spanContainer.clientWidth);) {
  spanContainer.style.fontSize = newSize + '%';
}
body {
  width: 100%;
  direction: rtl;
  text-align: center;
  background-color: AntiqueWhite;
  font-size: 15vmin;
  margin: 0;
  padding: 0;
}
h1 {
  height: 20vh;
  margin: 1vh;
  text-align: right;
  font-size: 100%
}
div {
  max-height: 70vh;
  background-color: Snow;
  margin: 0 5vh;
  padding: 2vh;
  border-radius: 10vh;
  overflow: hidden;
  word-wrap: break-word;
}
<div id="sw_content">
  <div id="sw_resize">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

Но это не меняет размер текста. (Я не могу использовать jQuery, но и в чистом JS это не должно быть так сложно).

PS: я знаю такие сообщения, как Динамическое изменение размера шрифта в соответствии с размером контейнера, но он по-прежнему не работает.


person Itai Alon    schedule 06.05.2016    source источник


Ответы (1)


используйте высоту прокрутки spanContainer по сравнению с его clientHeight.

for (var newSize = 100; spanContainer.scrollHeight > spanContainer.clientHeight; newSize -= 10)
{
  spanContainer.style.fontSize = newSize + '%';
}
person Alex Durbin    schedule 06.05.2016