首页怎么在div中写竖着的一排字

怎么在div中写竖着的一排字

时间: 2024-10-25 17:15:34 浏览: 31

要在`<div>`标签内显示一排竖直的文字，可以使用CSS的`writing-mode`属性和`transform`属性。通常情况下，文字会在水平方向上排列，而要使其垂直排列，可以设置`writing-mode: vertical-rl`（从右到左书写）或`writing-mode: vertical-lr`（从左到右书写）。同时，需要通过`transform: rotate(90deg)`将其旋转90度。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .text-vertical { width: 200px; /* 宽度可以根据需求自定 */ height: 200px; /* 高度也可以根据需求自定 */ writing-mode: vertical-rl; /* 从右到左书写 */ transform: rotate(90deg); /* 将文字旋转90度 */ overflow: auto; /* 添加滚动条，如果文本超出容器高度 */ white-space: nowrap; /* 防止换行 */ display: inline-block; /* 保持文字在一行显示 */ } p { margin: 0; /* 清除默认的行间距 */ padding: 5px; /* 可选样式，增加一些边距 */ font-size: 24px; /* 字体大小示例 */ } </style> </head> <body> <div class="text-vertical"> <p>这是一排竖直排列的文字。</p> </div> </body> </html> ```

阅读全文