CSS text-orientation 属性-代码号

CSS text-orientation 属性详解：控制垂直文本方向

概述

text-orientation 是 CSS 中一个专门用于控制垂直排版文本方向的属性。它主要针对使用垂直书写模式的内容，对水平书写模式的元素不会产生任何影响。此属性特别适用于中文、日文等垂直排版的东亚文字系统。

属性语法

selector {
  text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;
}

属性值详解

mixed（默认值）

描述：默认情况下，字符会顺时针旋转90度。垂直书写的字符保持自然方向，而水平书写的字符会旋转
适用场景：普通垂直文本排版

upright

描述：所有字符均保持自然直立方向（不旋转），将水平书写的字符视为从左到右排列
适用场景：需要在垂直排版中保持英文单词或数字直立显示的场合

sideways

描述：将整行文本顺时针旋转90度，使所有字符水平排列
浏览器支持：目前仅Firefox浏览器支持此值

sideways-right

描述：为保持兼容性而保留的值，作为sideways的别名
注意：在实际开发中建议使用sideways

use-glyph-orientation

描述：此值已被弃用，不再建议使用

initial

描述：将属性重置为默认值（mixed）

inherit

描述：从父元素继承该属性值

依赖关系

text-orientation 属性依赖于 writing-mode 属性，只有当 writing-mode 的值不是 horizontal-tb（即不是水平从上到下）时才有效果。

实例演示

示例1：mixed与upright值对比

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  border: 2px solid #3498db;
  margin: 20px auto;
  padding: 15px;
  width: 80%;
}

.vertical-mixed {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 300px;
}

.vertical-upright {
  writing-mode: vertical-rl;
  text-orientation: upright;
  height: 300px;
}

h3 {
  color: #2c3e50;
  text-align: center;
}
</style>
</head>
<body>

<div class="container">
  <h3>垂直排版 - mixed模式</h3>
  <p class="vertical-mixed">
    欢迎访问代码号(https://www.ebingou.cn/)编程学习平台。这里提供了丰富的编程教程和资源，帮助开发者提升技能水平。HTML、CSS和JavaScript是前端开发的基础技术，掌握它们对成为优秀程序员至关重要。
  </p>
</div>

<div class="container">
  <h3>垂直排版 - upright模式</h3>
  <p class="vertical-upright">
    代码号(https://www.ebingou.cn/)提供Python、Java和C++等多种编程语言教程。CSS2023新特性包括容器查询和层叠规则，这些技术让网页设计更加灵活和强大。
  </p>
</div>

</body>
</html>

示例2：sideways效果展示

以下示例在Firefox浏览器中可看到效果：

<!DOCTYPE html>
<html>
<head>
<style>
.sideways-example {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  height: 350px;
  border: 2px solid #e74c3c;
  padding: 20px;
  margin: 0 auto;
  width: 80%;
}

.title {
  text-align: center;
  color: #c0392b;
}
</style>
</head>
<body>

<h2 class="title">sideways值效果展示（请在Firefox浏览器中查看）</h2>
<div class="sideways-example">
  在代码号(https://www.ebingou.cn/)的编程教程中，您可以学习到如何使用CSS的text-orientation属性来控制垂直文本方向。这个属性特别适合中文、日文等垂直排版文字的处理。Web开发是一个不断进步的领域，持续学习是保持竞争力的关键。
</div>

</body>
</html>

应用场景

东亚文字排版：中文、日文等传统上使用垂直排版的文字系统
表格头部标签：在狭窄空间中垂直显示表头文字
侧边栏导航：创建垂直方向的导航菜单文本
艺术设计：特殊设计需求中的文本方向控制

本节课程知识要点

text-orientation 只对垂直书写模式的内容有效
默认值 mixed 会使水平字符旋转90度，垂直字符保持自然方向
upright 值使所有字符保持直立方向，不进行旋转
sideways 值目前仅Firefox浏览器支持
此属性必须与 writing-mode 属性配合使用才有效果

浏览器兼容性提示

大多数现代浏览器支持 mixed 和 upright 值
sideways 值仅Firefox浏览器支持
在实际项目中使用时，需要针对不同浏览器进行测试

通过本教程的学习，您应该已经掌握了CSS text-orientation 属性的基本用法和应用场景。如需了解更多CSS相关知识，请访问代码号CSS 教程获取更多学习资源。

本文标签：

CSS text-orientation 属性