html - div内文本的垂直旋转

Question

我有一个包含两行的 div，但我想让它们显示为垂直。

这就是我的 div 的样子

<div>
 Line One <br>Line Two
</div>

有没有办法使 div 内的文本方向垂直，使其看起来像

L L
I I
N N
E E

O T
N W
E O

Answer 1

将它们都包装在 p 标签中，并设置word-break为break-all和widthto 1px。

一个 hacky 解决方案，但一个有效的解决方案！

看这个例子，否则，我不相信有一个跨浏览器的解决方案。

Answer 2

在 CSS 中，您可以旋转文本。但有一些不同：

<div style="-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform: rotate(90deg);filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);">
 Line One
</div>