Форум

Alexey04 · #1 (**permalink**) 15.12.2016, 19:23

Собственно есть прямоугольная область(200x100 при Full HD разрешении). Есть определённый шрифт(roboto). Есть текст(какой длинны я не знаю). Собственно, как сделать так, чтобы компьютер сам подсчитал какой размер шрифта нужно, чтобы ЗАПОЛНИТЬ эту область текстом?

рони · #2 (**permalink**) 15.12.2016, 22:31

Alexey04,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .fullHD{
     width: 200px;
     height: 100px;
     overflow: hidden;
     border: 2px solid #0000FF;
     text-align:  center;
    }

  </style>

  <script>
       window.addEventListener('DOMContentLoaded', function() {
       [].forEach.call( document.querySelectorAll('.fullHD'), function(el) {
       if (/^\s+$/.test(el.textContent)) return;
       el.style.fontSize =  '8px' ;
       for (var i=8; el.scrollWidth <= el.clientWidth && el.scrollHeight <= el.clientHeight; i++)  {el.style.fontSize =  i + 'px';}
       el.style.fontSize =  (i - 2) + 'px';
       });
         });

  </script>
</head>

<body>
<div class="fullHD">


</div>
<div class="fullHD">Собственно есть прямоугольная область</div>
<div class="fullHD">Собственно есть прямоугольная область(200x100 при Full HD разрешении). Есть определённый шрифт(roboto).</div>
<div class="fullHD">шрифт(roboto)</div>
</body>
</html>

Alexey04 · #3 (**permalink**) 16.12.2016, 22:54

Сообщение от рони

Alexey04,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .fullHD{
     width: 200px;
     height: 100px;
     overflow: hidden;
     border: 2px solid #0000FF;
     text-align:  center;
    }

  </style>

  <script>
       window.addEventListener('DOMContentLoaded', function() {
       [].forEach.call( document.querySelectorAll('.fullHD'), function(el) {
       if (/^\s+$/.test(el.textContent)) return;
       el.style.fontSize =  '8px' ;
       for (var i=8; el.scrollWidth <= el.clientWidth && el.scrollHeight <= el.clientHeight; i++)  {el.style.fontSize =  i + 'px';}
       el.style.fontSize =  (i - 2) + 'px';
       });
         });

  </script>
</head>

<body>
<div class="fullHD">


</div>
<div class="fullHD">Собственно есть прямоугольная область</div>
<div class="fullHD">Собственно есть прямоугольная область(200x100 при Full HD разрешении). Есть определённый шрифт(roboto).</div>
<div class="fullHD">шрифт(roboto)</div>
</body>
</html>

Вроде всё работает. Спасибо

Форум

Справочник

Discord чат

Курсы javascript