CSS让div文字竖着展示

CSS让div文字竖着展示

在CSS中，可以通过以下几种方式让 <div> 中的文字竖着展示：

1. 使用 writing-mode

writing-mode 属性可以改变文本的书写方向，使其竖排显示。

示例代码：

.vertical-text {
  writing-mode: vertical-rl; /* 从右到左竖排 */
  /* writing-mode: vertical-lr; */ /* 从左到右竖排 */
}

• 解释：
  • vertical-rl：文本从右到左竖排（默认从上到下）。
  • vertical-lr：文本从左到右竖排（默认从上到下）。

2. 使用 text-orientation

text-orientation 属性可以控制竖排文本中字符的方向。

示例代码：

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright; /* 字符直立 */
  /* text-orientation: sideways; */ /* 字符侧放 */
}

• 解释：
  • upright：字符直立显示。
  • sideways：字符侧放显示（默认）。

3. 使用 transform: rotate

通过 transform: rotate 将文本旋转 90 度，实现竖排效果。

示例代码：

.vertical-text {
  transform: rotate(90deg); /* 旋转 90 度 */
  transform-origin: left top; /* 旋转基点 */
  white-space: nowrap; /* 防止换行 */
}

• 解释：
  • rotate(90deg)：将文本顺时针旋转 90 度。
  • transform-origin：设置旋转的基点。

4. 使用 Flexbox 实现竖排布局

通过 Flexbox 将文本容器设置为竖排布局。

示例代码：

.vertical-text {
  display: flex;
  flex-direction: column; /* 竖排布局 */
}

5. 使用 writing-mode 和 text-align 结合

通过 writing-mode 和 text-align 实现竖排文本的对齐。

示例代码：

.vertical-text {
  writing-mode: vertical-rl;
  text-align: center; /* 文本居中 */
}

6. 示例代码

以下是一个完整的示例，展示如何实现竖排文本：

<div class="vertical-text">竖排文本示例</div>

.vertical-text {
  writing-mode: vertical-rl; /* 从右到左竖排 */
  text-orientation: upright; /* 字符直立 */
  height: 200px; /* 设置容器高度 */
  border: 1px solid #000; /* 添加边框 */
  padding: 10px; /* 添加内边距 */
}

7. 响应式竖排文本

通过媒体查询，可以为不同设备设置不同的竖排样式。

示例代码：

.vertical-text {
  writing-mode: horizontal-tb; /* 默认横排 */
}

@media (min-width: 768px) {
  .vertical-text {
    writing-mode: vertical-rl; /* 在大屏幕上竖排 */
  }
}

总结

• 使用 writing-mode 实现竖排文本。
• 使用 text-orientation 控制字符方向。
• 使用 transform: rotate 旋转文本。
• 使用 Flexbox 实现竖排布局。

根据需求选择合适的方法即可！

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github