使用html+JQ+css 完整代码输入框输入文字 点击转换按钮 把横版文字转换成竖版文字 编码为utf-8

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>横竖版文字转换</title>
	<style>
		.container {
			width: 500px;
			margin: 0 auto;
			text-align: center;
		}
		h1 {
			font-size: 32px;
			margin-bottom: 20px;
		}
		textarea {
			width: 100%;
			height: 200px;
			padding: 10px;
			margin-bottom: 20px;
			border: 1px solid #ccc;
			resize: none;
			font-size: 18px;
		}
		button {
			background-color: #4CAF50;
			color: white;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			font-size: 18px;
			cursor: pointer;
		}
		.result {
			width: 100%;
			height: 200px;
			padding: 10px;
			border: 1px solid #ccc;
			font-size: 18px;
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script>
		$(document).ready(function() {
			$('button').click(function() {
				var text = $('textarea').val().trim();
				if (text !== '') {
					var result = '';
					for (var i = 0; i < text.length; i++) {
						result += text[i] + '\n';
					}
					$('.result').text(result);
				} else {
					alert('请输入要转换的文字！');
				}
			});
		});
	</script>
</head>
<body>
	<div class="container">
		<h1>横竖版文字转换</h1>
		<textarea placeholder="请输入要转换的文字"></textarea>
		<button>转换</button>
		<textarea class="result" placeholder="转换后的文字"></textarea>
	</div>
</body>
</html>