Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.12.2016, 19:23
Новичок на форуме
Отправить личное сообщение для Alexey04 Посмотреть профиль Найти все сообщения от Alexey04
 
Регистрация: 09.12.2016
Сообщений: 6

Автоматический размер шрифта
Собственно есть прямоугольная область(200x100 при Full HD разрешении). Есть определённый шрифт(roboto). Есть текст(какой длинны я не знаю). Собственно, как сделать так, чтобы компьютер сам подсчитал какой размер шрифта нужно, чтобы ЗАПОЛНИТЬ эту область текстом?
Ответить с цитированием
  #2 (permalink)  
Старый 15.12.2016, 22:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #3 (permalink)  
Старый 16.12.2016, 22:54
Новичок на форуме
Отправить личное сообщение для Alexey04 Посмотреть профиль Найти все сообщения от Alexey04
 
Регистрация: 09.12.2016
Сообщений: 6

Сообщение от рони Посмотреть сообщение
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>
Вроде всё работает. Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Где и как сохранить выбранный пользователем размер шрифта ivi_ivi_ivi Элементы интерфейса 6 05.06.2015 08:28
Где и как сохранить выбранный пользователем размер шрифта ivi_ivi_ivi Элементы интерфейса 1 03.06.2015 00:00
Как изменить цвет и размер шрифта в Java savas332 Серверные языки и технологии 3 09.01.2014 17:02
Размер символа из моноширинного шрифта danik.js Общие вопросы Javascript 2 28.01.2013 21:43
Размер шрифта в input Indiana Элементы интерфейса 5 16.02.2010 19:52