带有 css 的垂直流动文本答案

【问题标题】：Vertically flowing text with css带有 css 的垂直流动文本
【发布时间】：2021-04-24 23:21:25
【问题描述】：

我想要一个包含一些文本的 div。但我希望文本垂直而不是水平流动。像这样；

是的

关于如何使用 CSS 实现这一点的任何想法？

【问题讨论】：

标签： css

【解决方案1】：

如果您只有一个行文本，您可以尝试使用 width:1em;letter-spacing:1px（每个字母之间有一个空格）

编辑：如果你想在每个字母之间不使用空格width:1em;letter-spacing:1em;word-wrap:break-word

【讨论】：

尝试使用 0.9em 并在每个字母之间添加一个空格（或使用自定义字母间距）//检查我的更新
是的，每个字母之间的空格会破坏整个目的，当然它会在每个字母之间使用空格。 :(
您是否尝试将其与“word-wrap: break-word”结合使用？请注意，这仅适用于 IE 和 CSS3 兼容的浏览器。

【解决方案2】：

CSS3有一个提议的'writing-mode'属性，可以设置为'tb-lr'（从上到下写文本，从左到右写行），但不知道有没有浏览器支持然而，所以它不是可以依赖的东西。

【讨论】：

IE支持写模式，其他浏览器还不支持。

【解决方案3】：

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

&lt;div&gt;Jelly&lt;/div&gt;

请在此处找到答案，您可以使用 text-orientation 和

【讨论】：

【解决方案4】：

.yourtext { -moz-transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg);
            -moz-transform-origin: top right;
            -webkit-transform-origin: top right;
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

【讨论】：

这只是旋转整个文本，它不会旋转字母。