css竖排文字

在网页设计中，我们经常会遇到需要将文字竖排的需求，制作一些古诗词、歌词、名言警句等页面时，竖排文字可以更好地体现出其艺术效果，如何在CSS中实现竖排文字呢？本文将介绍几种常见的实现方法。

1、使用writing-mode属性

writing-mode属性是CSS3新增的一个属性，用于设置文本的书写方向，通过设置writing-mode为vertical-rl（从右到左）或vertical-lr（从左到右），可以实现文字的竖排效果。

p {
  writing-mode: vertical-rl;
}

2、使用transform属性

通过transform属性的rotate函数，可以将文字旋转90度，从而实现竖排效果，需要注意的是，这种方法会导致文字的行高发生变化，因此需要设置适当的行高。

p {
  transform: rotate(90deg);
  line-height: 2; /* 根据实际情况调整行高 */
}

3、使用伪元素和定位

通过伪元素和定位，可以实现更复杂的竖排效果，为需要竖排的元素添加一个伪元素，然后设置伪元素的定位为绝对定位，并旋转90度，将伪元素的内容设置为与原元素相同的内容。

p {
  position: relative;
}
p::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: inherit;
  transform: rotate(90deg);
}

4、使用SVG矢量图形

SVG矢量图形可以直接创建文字，并通过设置text-orientation属性来实现竖排效果，这种方法不依赖于浏览器对CSS的支持，兼容性较好。

<svg width="200" height="100">
  <text x="10" y="80" text-anchor="middle" fill="black" font-size="24" text-orientation="upright">这是一个竖排的文字示例</text>
</svg>

以上就是CSS实现竖排文字的几种常见方法，在实际开发中，可以根据需求和浏览器兼容性选择合适的方法，需要注意的是，竖排文字可能会影响阅读体验，因此在使用时要谨慎。