CSS文字竖向排列
在网页设计中，有时需要将文字进行竖向排列。解决方案主要是通过CSS属性来实现，常见的方法包括使用writing-mode属性、旋转transform属性以及调整display和flex布局等。
下面几种实现文字竖向排列的思路和代码示例。
方法一：使用writing-mode属性
writing-mode属性是用来定义文本的排版方向。可以通过设置该属性为vertical-rl或vertical-lr来实现文字竖向排列。
css
.vertical-text {
writing-mode: vertical-rl; /* 从右到左垂直排列 */
/* 或者使用 vertical-lr 从左到右垂直排列 */
}
HTML代码如下：
html</p>
<div class="vertical-text">竖向排列的文字</div>
<p>方法二：使用transform属性
通过transform属性中的rotate()函数可以旋转元素的角度，从而实现文字竖向排列的效果。
css
.rotate-text {
transform: rotate(90deg); /* 顺时针旋转90度 */
display: inline-block;
white-space: nowrap; /* 防止文字换行 */
}
HTML代码如下：
html</p>
<div class="rotate-text">竖向排列的文字</div>
<p>方法三：使用flex布局
利用flexbox布局也可以实现文字竖向排列。通过设置父容器的display属性为flex，并调整子元素的方向。
css
.flex-container {
display: flex;
flex-direction: column; /* 设置为列方向 */
}</p>
<p>.flex-item {
writing-mode: vertical-rl; /* 可选，根据需求调整 */
}
HTML代码如下：
html</p>
<div class="flex-container">
<div class="flex-item">字</div>
<div class="flex-item">竖</div>
<div class="flex-item">向</div>
<div class="flex-item">排</div>
<div class="flex-item">列</div>
</div>
<p>以上三种方法都可以实现文字竖向排列，具体选择哪种方法取决于实际项目的需求和兼容性考虑。例如，writing-mode属性在现代浏览器中有较好的支持，但可能在一些老旧浏览器中存在兼容性问题；而transform属性则可以通过简单的旋转操作快速实现效果。
