Автоматический размер шрифта
Собственно есть прямоугольная область(200x100 при Full HD разрешении). Есть определённый шрифт(roboto). Есть текст(какой длинны я не знаю). Собственно, как сделать так, чтобы компьютер сам подсчитал какой размер шрифта нужно, чтобы ЗАПОЛНИТЬ эту область текстом?
|
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>
|
Цитата:
|
| Часовой пояс GMT +3, время: 01:58. |