使用html+JQ+css5 完整代码横版文字转换成竖版 从左到右

<!DOCTYPE html>
<html>
<head>
	<title>横版文字转换成竖版</title>
	<style type="text/css">
		.wrapper {
			width: 100%;
			height: 500px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			position: relative;
		}
<pre><code>	.text {
		writing-mode: vertical-rl;
		transform: rotate(180deg);
		font-size: 24px;
		line-height: 30px;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		white-space: nowrap;
	}

	.text span {
		display: inline-block;
	}

	.text span:before {
		content: &quot;&quot;;
		display: inline-block;
		width: 0;
		height: 100%;
		vertical-align: middle;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div class="wrapper">
		<div class="text">
			<span>横版文字转换成竖版</span>
			<span>从左到右</span>
		</div>
	</div>
<pre><code>&lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
	$(document).ready(function(){
		var text = $(&quot;.text&quot;).text();
		var chars = text.split(&quot;&quot;);

		$(&quot;.text&quot;).empty();

		$.each(chars, function(index, value){
			$(&quot;.text&quot;).append(&quot;&lt;span&gt;&quot; + value + &quot;&lt;/span&gt;&quot;);
		});
	});
&lt;/script&gt;
</code></pre>
</body>
</html>

使用html+JQ+css5 完整代码横版文字转换成竖版 从左到右

使用html+JQ+css5 完整代码横版文字转换成竖版从左到右