css如何让字竖着写

本文将为大家介绍如何使用CSS让文字竖着写，其实这并不难，只要掌握了一些CSS的基础知识就能轻松搞定，下面就和小编一起来看看吧。

一、使用writing-mode属性

writing-mode是CSS3中的一个新属性，用于设置文本的书写方向，通过设置writing-mode为'vertical-lr'或'vertical-rl'可实现文字竖向排列，下面就是一个示例：

.vertical-text {
  writing-mode: vertical-lr;  /* 竖向排列 */
}

上面的代码表示将元素的书写方向设置为垂直向上，这样文本就能从上往下排列。如果想让文本从下往上排列，则可以将属性值设置为'vertical-rl'。

需要注意的是，默认情况下，writing-mode属性对一些行内元素，如<a>, 等元素会失效，需要设置为'block'才能生效，例如：

.vertical-text {
  display: block;
  writing-mode: vertical-lr;  /* 竖向排列 */
}

二、transform旋转

另一种实现文字竖向排列的方法是使用transform的rotate旋转，具体方法如下：

.vertical-text {
  display: inline-block; /* 行内元素变块级，方便后面的旋转 */
  transform: rotate(90deg); /* 旋转90度 */
  transform-origin: 50% 50%; /* 设置旋转基点为中心点 */
}

上面的代码将元素的display设置为inline-block，这样就可以成为行内元素了，然后使用transform属性旋转90度，再设置旋转基点为中心点，这样就实现了竖向排列的效果。

三、结语

以上就是两种实现文字竖向排列的方法，因此不管是writing-mode还是transform旋转，都能够实现竖向排列的效果，可根据自己的喜好选择技术方法。希望本文能够为大家提供帮助。