我如何使用css使单词垂直[重复]答案

【问题标题】：How can i make words vertical using CSS [duplicate]我如何使用css使单词垂直[重复]
【发布时间】：2022-01-01 16:10:21
【问题描述】：

我打算使用 CSS 制作垂直单词，这里有一个演示：

我怎样才能实现它？

【问题讨论】：

标签： html css

【解决方案1】：

p {
  writing-mode: vertical-rl;
  text-orientation: mixed;
 }

&lt;p&gt;I am some cool text&lt;/p&gt;

writing-mode: vertical-rl; text-orientation: mixed;

Reference

【讨论】：

【解决方案2】：

您需要transform: rotate 属性。在这里您可以找到更多信息：[在此处输入链接描述][1]

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate()

【讨论】：

【解决方案3】：

你可以用文本方向来实现它：

.txt { 
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

&lt;div class="txt"&gt;some text&lt;/div&gt;

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation

【讨论】：

【解决方案4】：

只需使用变换和旋转

.wrapper {
  margin: 100px 80px;
  transform: rotate(90deg);
  transform-origin: top center;
}

.number {
  display: inline-block;
  transform: rotate(-90deg);
}

<div class="wrapper">
  <div class="item">
    <span class="number">1</span>
    <span class="description">this is one</span>
  </div>
  <div class="item">
    <span class="number">2</span>
    <span class="description">this is two</span>
  </div>
  <div class="item">
    <span class="number">3</span>
    <span class="description">this is three</span>
  </div>
</div>

【讨论】：