HTML/CSS : How to write a text vertically, 保持字符水平

Question

我想知道我们是否可以写一个垂直文本，但不使用任何改变字符方向的 hack 的旋转。

因此，我希望在可能的 div 中显示如下文本，而不是“START”:
S
T
A
R
T

我可以使用“break-word: word-break”并将元素的宽度设置为 0，但文本不会居中。字符将仅向左对齐

不是的副本:Vertical Text Direction
我不想旋转文本，我想保留字符的方向

这是我可以获得的代码示例:

.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>

Answer 1

您可以使用 writing-mode CSS 属性与 text-orientation 结合使用CSS 属性。

div {
  writing-mode: vertical-lr;
  text-orientation: upright;
}

引用，writing-mode 属性..

[..]specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line.

实际上，这定义了文本行是水平还是垂直布局以及阻止进度的方向。

text-orientation 属性定义一行中文本字符的方向。此属性仅在垂直模式下有效。

示例:

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:

This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

根据这个:https://caniuse.com/#search=text-orientation ，目前看来几乎所有浏览器都支持它，除了 IE/Edge。