css中如何让字体竖起来

CSS 中如何让字体竖起来 在中文排版中，有时需要将字体竖起来，以达到更好的排版效果。在 CSS 中，我们可以很方便地实现这个效果。 首先，我们需要将文本中的每个字符都放在一个单独的容器中。这可以通过在每个字符周围添加一个 span 标签来实现。接着，我们需要对这些字符进行旋转。这可以通过 transform 属性和 rotate() 函数来实现。最后，我们可能还需要对容器进行一些样式设置，以达到理想的效果。 下面是一个简单的示例代码：

p {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.vertical-text {
  display: inline-block; /* 将容器转为块级元素 */
  margin-right: 0.5em; /* 添加一些间距 */
  transform: rotate(90deg); /* 将容器旋转 90 度 */
}

.vertical-text span {
  display: block; /* 将每个字符转为块级元素 */
  transform: rotate(-90deg); /* 将每个字符逆时针旋转 90 度 */
}

在上面的代码中，我们首先定义了一个 p 元素的基本样式。接着，我们为竖排文本定义了一个名为 vertical-text 的类，它用于添加容器的样式。在这个类中，我们将容器转换为块级元素，并对容器进行了旋转。最后，我们还定义了一个 vertical-text span 选择器，用于对每个字符的样式进行设置。 使用时，我们只需要给想要竖排的文本添加 vertical-text 类，并将文本放在容器中即可：

  
    我
    的
    中
    文
    太
    棒
    了
  

运行上面的代码，你就可以看到竖排的文本了！