以下が、実際のプログラムになります。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字列フォントサイズアプリ</title>
</head>
<body>
<h1>文字列フォントサイズアプリ</h1>
<input type="text" id="textInput">
<button onclick="displayText()">表示</button>
<div id="textDisplay"></div>
<script>
function displayText() {
let inputText = document.getElementById("textInput").value;
let outputText = "";
for (let i = 0; i < inputText.length; i++) {
if (i !== 0 && i % 10 === 0) {
outputText += "<br>";
}
outputText += inputText.charAt(i) + " ";
}
document.getElementById("textDisplay").innerHTML = "<p style='font-size:30pt'>" + outputText + "</p>";
}
</script>
</body>
</html>
```
このプログラムでは、入力欄と表示ボタン、そして結果を表示するためのdiv要素を用意しています。JavaScriptのdisplayText()関数では、入力された文字列を1文字ずつスペースをあけてoutputText変数にセットし、10文字毎に改行を挿入しています。そしてinnerHTMLを用いて、style属性でフォントサイズを指定してoutputTextを表示しています。
ジョークとしては、最後に「10文字毎に改行するのは、30文字毎に改行するのと同じ演出です。」といったことをつけると面白いかもしれません。
