css实现文字竖排效果示例代码

要实现文字竖排效果，我们可以使用CSS的writing-mode属性来设置文本的排列方式。writing-mode属性用于设置文本的书写模式，其可选值包括：

• horizontal-tb：水平方向从左到右排列，垂直方向从上到下排列，这是默认值。
• vertical-rl：垂直方向从上到下排列，水平方向从右到左排列。
• vertical-lr：垂直方向从上到下排列，水平方向从左到右排列。

下面是示例代码：

.vertical-text {
  writing-mode: vertical-lr;
}

这些代码将使文本沿着从上到下的方向排列，从左到右地排列。我们可以在包含需要竖向排列的文本的标签中加入这些CSS代码：

<div class="vertical-text">
  <p>这是竖排的文本</p>
</div>

以上是CSS实现文字竖排效果的基本方法，下面我们来看一些进一步的示例。

示例1：水平竖排

以下示例使用writing-mode属性和一些其他的CSS来创建水平方向的竖排文本：

<div class="vertical-text horizontal">
  <p>这是水平竖排的文本</p>
</div>

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

.horizontal {
  transform: rotate(-180deg);
  display: inline-block;
}

我们添加了一个text-orientation: upright属性来确保文本是垂直的。然后我们添加了一些额外的CSS来旋转文本并插入一个display: inline-block，使文本在一个单独的行内块容器中。

示例2：竖排显示数字

以下示例是使用CSS实现竖排显示数字：

<div class="vertical-text digits">
  <p>1234567890</p>
</div>

.vertical-text {
  writing-mode: vertical-lr;
  text-orientation: upright;
  display: inline-block;
  white-space: nowrap;
}

.digits p {
  margin: 0;
}

.digits p::after {
  content: "/";
}

.digits p:last-child::after {
  content: "";
}

我们添加了white-space: nowrap属性来防止数字在换行处自动截断。然后我们使用::after伪元素实现每两个数字之间的分隔符。

总结一下，CSS实现文字竖排效果的方法是使用writing-mode、text-orientation和其他CSS属性。在特定的情况下，我们可能需要添加一些额外的CSS，例如旋转或伪元素，以完全实现所需的竖排效果。