aokashi/full_message.html

## full_message.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>句読点を詰めるテスト</title>
  <script src="script.js" type="text/javascript"></script>
</head>
<body>
  <div id="message">
  </div>
</body>
</html>

## script.js
var string = "これは文字列のテストです。横幅16文字になると折り返しますが、折り返す次の文字が句読点だった場合は、その句読点を末尾に持ってきます。\n改行する場合は、どんな感じで動作するかも確かめてみましょう。";
var message = string.split('\n');
const MESSAGE_WIDTH = 16;

window.onload = function() {
  var messageElement = document.getElementById("message");
  message.forEach((line, i) => { // 1行(改行付き)
    var element = document.createElement("span");

    var count = 0;
    var string = ""; // 1行(改行を除く)分の文字列を蓄える文字列変数
    var lineElement;
    for (i = 0; i < line.length || count != 0; i++) { // 1文字
      console.log(i, line.length);
      if (is2ByteChar(line.charAt(i))) {
        count += 2;
      } else {
        count++;
      }
      string += line.charAt(i);
      if (count >= MESSAGE_WIDTH * 2) {
        console.log(string, i);
        if (line.charAt(i + 1) === "。" || line.charAt(i + 1) === "、") {
          string += line.charAt(i + 1); // 句読点の場合は句読点も加えてiを進める
          i++;
        }
        lineElement = document.createElement("span");
        lineElement.style.display = "inline-block";
        lineElement.style.width = "100%";
        lineElement.textContent = string;
        element.appendChild(lineElement);
        string = "";
        count = 0;
      }
    }
    messageElement.appendChild(element);
    messageElement.appendChild(document.createElement("br"));
  }, this);
};

function is2ByteChar(char) {
  return (char.match(/^[^\x01-\x7E\xA1-\xDF]+$/) !== null);
} // http://www.pori2.net/js/number/8.html

## style.css
body {
  font-family: monospace;
}

#message {
  width: 20em;
}

.blank {
  display: inline-block;
  width: 1em;
  visibility: hidden;
}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="style.css">
	<title>句読点を詰めるテスト</title>
	<script src="script.js" type="text/javascript"></script>
	</head>
	<body>
	<div id="message">
	</div>
	</body>
	</html>
	var string = "これは文字列のテストです。横幅16文字になると折り返しますが、折り返す次の文字が句読点だった場合は、その句読点を末尾に持ってきます。\n改行する場合は、どんな感じで動作するかも確かめてみましょう。";
	var message = string.split('\n');
	const MESSAGE_WIDTH = 16;

	window.onload = function() {
	var messageElement = document.getElementById("message");
	message.forEach((line, i) => { // 1行(改行付き)
	var element = document.createElement("span");

	var count = 0;
	var string = ""; // 1行(改行を除く)分の文字列を蓄える文字列変数
	var lineElement;
	for (i = 0; i < line.length \|\| count != 0; i++) { // 1文字
	console.log(i, line.length);
	if (is2ByteChar(line.charAt(i))) {
	count += 2;
	} else {
	count++;
	}
	string += line.charAt(i);
	if (count >= MESSAGE_WIDTH * 2) {
	console.log(string, i);
	if (line.charAt(i + 1) === "。" \|\| line.charAt(i + 1) === "、") {
	string += line.charAt(i + 1); // 句読点の場合は句読点も加えてiを進める
	i++;
	}
	lineElement = document.createElement("span");
	lineElement.style.display = "inline-block";
	lineElement.style.width = "100%";
	lineElement.textContent = string;
	element.appendChild(lineElement);
	string = "";
	count = 0;
	}
	}
	messageElement.appendChild(element);
	messageElement.appendChild(document.createElement("br"));
	}, this);
	};

	function is2ByteChar(char) {
	return (char.match(/^[^\x01-\x7E\xA1-\xDF]+$/) !== null);
	} // http://www.pori2.net/js/number/8.html
	body {
	font-family: monospace;
	}

	#message {
	width: 20em;
	}

	.blank {
	display: inline-block;
	width: 1em;
	visibility: hidden;
	}