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>
|