duderamos/font-autosizing.html

## font-autosizing.html
<!DOCTYPE html>
<head>
  <title>autosizing</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
  div { border: 1px solid #aaa; }
  .w70 { width: 70%; }
  .w20 { width: 20%; }
</style>
</head>
<body>
  <div class="w70">
    <span class="autosize">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet enim eu tellus porttitor, vel efficitur libero faucibus. Quisque magna dolor, cursus id justo vel, lobortis vestibulum ligula. Donec efficitur egestas odio, non convallis sapien vestibulum eget. Fusce scelerisque mauris urna, et pretium erat faucibus posuere.
    </span>
  </div>
  <div class="w20">
    <span class="autosize">
      john.doe@example.com
    </span>
  </div>
  <script>
    $(".autosize").each(function() {
      var textbox = $(this);
      var container = textbox.parent();
      var fontSize = parseInt(textbox.css("font-size"));

      while(textbox.width() > container.width())
        textbox.css("font-size", fontSize -= 0.5);
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<title>autosizing</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<style>
	div { border: 1px solid #aaa; }
	.w70 { width: 70%; }
	.w20 { width: 20%; }
	</style>
	</head>
	<body>
	<div class="w70">
	<span class="autosize">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet enim eu tellus porttitor, vel efficitur libero faucibus. Quisque magna dolor, cursus id justo vel, lobortis vestibulum ligula. Donec efficitur egestas odio, non convallis sapien vestibulum eget. Fusce scelerisque mauris urna, et pretium erat faucibus posuere.
	</span>
	</div>
	<div class="w20">
	<span class="autosize">
	john.doe@example.com
	</span>
	</div>
	<script>
	$(".autosize").each(function() {
	var textbox = $(this);
	var container = textbox.parent();
	var fontSize = parseInt(textbox.css("font-size"));

	while(textbox.width() > container.width())
	textbox.css("font-size", fontSize -= 0.5);
	});
	</script>
	</body>
	</html>