HTML/CSS :如何垂直书写文本，保持字符水平
我想知道我们是否可以写一个垂直文本，但不需要使用旋转的任何黑客改变字符的方向。
因此，与"START“不同，我希望在5月份的div中显示如下文本：
S
T
A
R
T
我可以使用“打断词:单词中断”，并将我的元素的宽度设置为0，但是文本不会居中。字符将只与左边对齐。
不是：垂直文本方向的副本
我不想旋转文本，我想保持字符的方向
下面是我可以得到的代码示例：
.vertical-text {
font-size: 25px;
word-break: break-word;
width: 0;
display: flex;
justify-content: center;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%
}<div class="vertical-text">START IT<div>
回答 3
Stack Overflow用户
发布于 2017-08-03 09:10:27
您可以结合使用writing-mode CSS属性和text-orientation CSS属性。
div {
writing-mode: vertical-lr;
text-orientation: upright;
}引用writing-mode属性..。
..specifies块流方向，即块级容器堆叠的方向，以及块容器内内联级内容流的方向。内容从上到下垂直流动，水平从右向左流动。下一条垂直线定位在上一行的左边。
实际上，这定义了文本行是水平的还是垂直的，以及阻止进度的方向。
属性定义行中文本字符的方向。此属性仅在垂直模式下起作用。
示例
p:first-of-type {
writing-mode: vertical-lr;
}
p:last-of-type {
writing-mode: vertical-lr;
text-orientation: upright;
}<h4>With writing mode "vertical-lr"</h4>
<p>Start</p>
<hr>
<h4>With writing mode "vertical-lr" and text-orientation "upright"</h4>
<p>Start</p>
尽管要警惕text-orientation
这是一种实验技术，因为该技术的规范还没有稳定下来，所以请检查兼容性表，以便在各种浏览器中使用。还请注意，随着规范的改变，在未来版本的浏览器中，实验技术的语法和行为可能会发生变化。
根据这个：https://caniuse.com/#search=text-orientation，从今天起几乎所有的浏览器都支持它，除了IE/Edge。
Stack Overflow用户
发布于 2017-08-03 09:10:35
你可以试试：
.vertical-text {
margin: 0 auto 2em;
width: 0;
word-wrap: break-word;
}
body {
font-family: Helvetica, sans-serif;
text-align: center;
}
h1 {
margin-bottom: 1.5em;
}<h1>Vertically Written Text</h1>
<h2 class="vertical-text">Vertical</h2>
<p>Tested in Chrome, Safari, Firefox, IE 8, IE 9, IE 10 and IE 11.</p>
Stack Overflow用户
发布于 2017-08-03 09:06:47
几种方法。
看看这个教程
更新
为我提供最好的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Vertical Text</title>
<style>
h1 span { display: block; }
</style>
</head>
<body>
<h1> START </h1>
<script>
var h1 = document.getElementsByTagName('h1')[0];
h1.innerHTML = '<span>' + h1.innerHTML.split('').join('</span><span>') + '</span>';
</script>
</body>
</html>
https://stackoverflow.com/questions/45479558
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号