如何实现Element UI中el-button的文字内容垂直排列布局？

Question

在使用Element UI时，如何实现el-button的文字内容垂直排列布局是一个常见的需求。默认情况下，el-button组件的文字是水平居中显示的，若需实现文字垂直排列（如“确\n认”效果），可通过自定义CSS样式解决。具体方法为：将按钮内文字用``包裹，并设置`writing-mode: vertical-rl;`或`writing-mode: tb-lr;`属性，同时调整按钮高度和宽度以适应文字布局。此外，还需注意兼容性问题，确保在不同浏览器下样式一致。此方案适用于需要竖排文字的特殊场景，例如传统风格界面或空间受限的设计需求。需要注意的是，Element UI本身未直接提供垂直排列选项，因此依赖CSS灵活定制是关键。

Answer 1

1. 问题背景与需求分析

在使用Element UI开发时，我们常常需要对默认组件样式进行定制化调整。例如，el-button组件默认的文字是水平居中显示的，但某些场景下（如传统风格界面或空间受限的设计），可能需要实现文字垂直排列的效果。

这种需求可以通过自定义CSS样式来解决。具体来说，我们需要将按钮内的文字用<span>包裹，并通过设置writing-mode属性来改变文字的方向。

• writing-mode: vertical-rl; - 文字从右到左垂直排列。
• writing-mode: tb-lr; - 文字从上到下垂直排列。

此外，为了确保视觉效果一致，还需要调整按钮的高度和宽度以适应文字布局。

2. 技术实现步骤

以下是实现el-button文字垂直排列的具体步骤：

1. 在HTML中，为el-button内部的文字添加一个<span>标签。
2. 通过CSS设置writing-mode属性，指定文字的排列方向。
3. 根据文字长度调整按钮的高度和宽度，确保布局合理。
4. 测试不同浏览器下的兼容性，确保样式一致性。

<template>
    <el-button>
        <span class="vertical-text">确n认</span>
    </el-button>
</template>

<style scoped>
.vertical-text {
    writing-mode: vertical-rl; /* 或者 tb-lr */
    text-align: center;
}
.el-button {
    height: 80px; /* 根据实际需求调整 */
    width: 40px;  /* 根据实际需求调整 */
}
</style>

3. 兼容性与优化建议

虽然writing-mode属性在现代浏览器中有较好的支持，但在某些老旧浏览器中可能存在兼容性问题。以下是一些优化建议：

浏览器	兼容性状态	解决方案
Chrome	完全支持	-
Firefox	完全支持	-
IE11	部分支持	使用Polyfill或替代方案

对于IE等老旧浏览器，可以考虑使用图片替代文字，或者提供降级方案以保证用户体验。

4. 场景应用与扩展

文字垂直排列的场景适用于多种设计需求，例如：

• 传统风格界面：竖排文字更符合传统文化审美。
• 空间受限的设计：竖排文字可以节省横向空间。

如果需要进一步扩展功能，可以结合JavaScript动态调整按钮大小，或者根据用户设备类型自动切换文字排列方式。

上图展示了一个典型的竖排文字按钮应用场景。