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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>横版文字转换成竖版</title>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style>
		.container {
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.input-box {
			margin-right: 20px;
		}
		.output-box {
			writing-mode: vertical-lr;
			text-orientation: upright;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="input-box">
			<label for="input-text">请输入横版文字：</label>
			<input type="text" id="input-text">
		</div>
		<button id="convert-btn">转换</button>
		<div class="output-box" id="output-text"></div>
	</div>
	<script>
		$(document).ready(function() {
			$('#convert-btn').click(function() {
				var inputText = $('#input-text').val();
				var outputText = '';
				for (var i = 0; i < inputText.length; i++) {
					outputText += inputText.charAt(i) + '<br>';
				}
				$('#output-text').html(outputText);
			});
		});
	</script>
</body>
</html>

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

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