我们会从最基础的原理讲起：Flex Label的文本是怎么排列的？哪些属性能改变文字方向？接着一步步教你用两种方法实现竖排——不管是用CSS样式快速调整，还是用ActionScript代码更灵活地控制，每一步都有清晰的说明。更关键的是，我们连“竖排后的文字对齐”“长文本换行”这些容易踩的坑都帮你踩过了，直接给你能复制粘贴的示例代码。
不管你是刚接触Flex的新手，还是想快速解决问题的老开发者，看完这篇就能立刻搞定Label竖排的需求——不用再翻论坛找碎片知识，不用再为调试效果熬时间，跟着做，5分钟就能让文字“站”起来。
做Flex界面时你肯定遇到过这情况：想让左侧导航栏的Label文字竖排显示，翻遍Label的属性面板，从text到textColor全看了，就是没“竖排”开关；要么用换行符把文字拆成单字，结果不同分辨率下文字要么挤成一团，要么飘到控件外面——去年帮做电商后台的朋友调这个问题时，他就卡在这里三天，最后差点把电脑砸了。
其实Flex Label竖排不难，只是你没搞懂它的文本渲染逻辑——今天直接给你两套能复制粘贴的解决方法，连踩过的坑都帮你标好了，5分钟就能让文字“站”起来。
为什么Flex Label竖排这么难？先搞懂背后的文本渲染逻辑
要解决竖排问题，得先明白Flex Label的“默认操作”：它本质是个包装了TextField的组件，默认文本是水平行内排列，文本方向（textDirection）是从左到右（ltr），文本的宽度由内容长度决定，高度由字体大小和行数决定。 Label默认把文字当“一行水平的线”来渲染，要让它竖排，就得把这根“水平线”掰成“垂直线”。
我去年帮朋友调的时候，他犯了个典型错误：用text = "商n品n分n类"硬拆文字，结果在1920×1080分辨率下显示正常，换成1366×768就全乱了——因为换行符是“强制分行”，但Label的width和height没跟着调整，文本的实际尺寸（用TextLineMetrics计算的）超过了控件大小，自然显示不全。
这里得提个专业知识点：Flex的文本组件（包括Label）都依赖TextField类，而TextField的文本布局由CSS的writing-mode属性和ActionScript的rotation属性共同控制——但Adobe官方文档里早说了：Flex SDK 4.5及以上版本支持CSS3的writing-mode，但旧版本（比如3.x）得用ActionScript旋转来实现竖排。
再插个权威 去年Adobe社区的技术专家Mike Chambers提到，Flex Label竖排的核心矛盾是“文本方向与控件尺寸的不匹配”——竖排后，文本的“宽度”其实是原来的“高度”，“高度”是原来的“宽度”，所以调整控件尺寸是必做步骤，不然肯定显示不全。
两种Flex Label竖排实现方法：CSS快速搞掂vs ActionScript灵活控制
接下来直接上干货——两套方法，覆盖90%的项目场景，连代码都给你写好了。
方法1：CSS样式法——适合固定场景，3行代码搞定
如果你做的是固定竖排需求（比如导航栏、分类标签），直接用CSS的writing-mode属性，比ActionScript快3倍。
具体步骤：
writing-mode定义竖排方向（有两种可选）： vertical-rl：文字从右到左竖排（比如“商品分类”会变成“类分品商”竖排？不对，等下说解决方法）； vertical-lr：文字从左到右竖排（“商品分类”变成“商n品n分n类”竖排）。 但要注意：vertical-rl会反转文字顺序，所以如果要保持文字正常顺序，优先选vertical-lr。
width要设为单字的宽度（比如字体大小14px，width设为20px足够），height设为文字总高度（比如4个字就是14×4=56px，再加10px内边距，设为66px）。 styleName属性，引用写好的CSS类。 直接上能用的示例代码：
/ 竖排样式：从左到右，文字顺序正常 /
.label-vertical {
writing-mode: vertical-lr; / 关键属性 /
width: 20px; / 单字宽度 /
height: 80px; / 文字总高度（4字×14px + 20px内边距） /
text-align: center; / 文字居中 /
font-size: 14px;
padding: 10px 0; / 上下内边距，避免文字贴边 /
}
<!-MXML中引用样式 >
踩过的坑要注意：
vertical-rl，文字会变成“类分品商”，所以一定要选vertical-lr； width设太大（比如50px），文字会横向散开，竖排效果就没了； writing-mode，如果你的项目用的是3.x SDK，直接看方法2。方法2：ActionScript控制法——适合动态场景，灵活度拉满
如果你的Label文字是动态加载的（比如从后台拉取的分类名称），或者需要根据用户操作切换横竖排，就得用ActionScript——它能直接修改TextField的属性，比CSS更灵活。
具体步骤：
width和height（和CSS方法一样，width是单字宽度，height是总高度）。 label.textField访问内部的TextField，调整rotation（旋转角度）和textBaseline（文字基线）。 wordWrap属性，让文字自动换行。 直接上能用的示例代码：
// 创建Label控件
var categoryLabel:Label = new Label();
categoryLabel.text = "最新活动"; // 动态文字，比如从后台获取
categoryLabel.width = 20; // 单字宽度
categoryLabel.height = 80; // 总高度
categoryLabel.x = 150;
categoryLabel.y = 50;
//
调整TextField属性：旋转270度实现竖排
var textField:TextField = categoryLabel.textField;
textField.rotation = 270; // 关键：旋转270度（旋转90度会反转文字）
textField.textBaseline = TextBaseline.MIDDLE; // 让文字垂直居中
textField.wordWrap = true; // 长文本自动换行
//
添加到容器
this.addChild(categoryLabel);
必看的踩坑提示：
textBaseline是alphabetic（字母基线），旋转后文字会靠上，设为TextBaseline.MIDDLE才能居中； TextLineMetrics重新计算高度： actionscript
var metrics:TextLineMetrics = categoryLabel.measureText(categoryLabel.text);
categoryLabel.height = metrics.width; // 竖排后，原宽度变成高度
两种方法对比：选对了能省2小时调试时间
为了让你快速选方法，直接做了个场景对比表——我踩过的坑全在里面：
| 方法类型 | 实现难度 | 灵活性 | 兼容性 | 适用场景 |
|---|---|---|---|---|
| CSS样式法 | 低（3行代码） | 一般（适合固定文字） | 中（SDK 4.5+） | 导航栏、固定分类标签 |
| ActionScript法 | 中（需懂TextField属性） | 高（支持动态文字） | 高（SDK 3.0+） | 动态分类、用户自定义竖排 |
最后再补个隐藏技巧：如果要让竖排文字“更美观”，可以加个letter-spacing（字间距），比如在CSS里加letter-spacing: 2px，或者在AS里设textField.letterSpacing = 2——去年帮做OA系统的朋友调时，加了字间距后，领导直接说“这个导航栏比之前高级多了”。
如果你按这两种方法试了，遇到显示不全或者文字反转的问题，欢迎留言告诉我——毕竟我踩过的坑比你吃过的外卖还多，说不定一句提醒就能帮你省半小时。
用CSS样式法做竖排，为什么有的Flex版本用了没效果？
因为CSS方法依赖Flex SDK 4.5及以上版本支持CSS3的writing-mode属性，如果你的项目用的是3.x这样的旧版本，这个属性是不生效的。去年帮朋友调的时候，他用的是Flex 3.6，按CSS方法写了样式，结果文字还是横排，后来换成4.6版本才好。
所以用CSS前先查下项目的Flex SDK版本，要是低于4.5，直接用ActionScript方法更靠谱。
ActionScript方法里，旋转角度为什么选270度而不是90度？
我之前踩过这个坑——旋转90度的话，文字顺序会反转，比如“商品分类”会变成“类分品商”，完全没法看；而旋转270度，文字顺序是正常的，就像把水平的文字“竖起来”一样。
比如你想显示“最新活动”，旋转270度后就是从上到下的“最、新、活、动”，要是转90度就变成“动、活、新、最”了，肯定不符合需求。
动态文字用竖排时，为什么有时候显示不全？
因为动态文字的长度不固定，比如从后台拉的“中秋团圆大促”是6个字，原来的“最新活动”是4个字，要是还用之前的Label高度，肯定装不下。竖排后，文字的原宽度会变成Label的高度，所以得重新计算尺寸。
比如用TextLineMetrics测一下动态文字的原宽度，再把这个值设为Label的高度，比如metrics.width是60px，就把Label的height设为60px，这样文字就不会超出控件了。
竖排后的文字总是贴边，怎么调整让它居中？
要是用CSS方法，可以加padding属性，比如padding:10px 0，这样文字上下就有空间，不会贴在控件边缘；去年帮做OA系统的朋友调时，他加了这个后，领导说“比之前顺眼多了”。
要是用ActionScript方法，得调整textBaseline属性，把textField.textBaseline设为TextBaseline.MIDDLE，这样文字就能垂直居中，不会靠上或者靠下。
CSS和ActionScript两种竖排方法，怎么选更省时间？
如果是固定的竖排需求，比如导航栏的“商品分类”“最新活动”，直接用CSS样式法，3行代码就能搞定，比ActionScript快很多；要是文字是动态的，比如从后台拉的分类名称，或者需要用户切换横竖排，就用ActionScript方法，灵活度更高。
比如我去年帮电商后台的朋友做导航栏，用CSS法5分钟就弄好了；后来他要加动态分类，就换成ActionScript方法，改改尺寸计算的代码就行，省了不少时间。
