el-button设置文字竖着显示
时间: 2023-08-07 10:08:26 浏览: 333
要实现文字竖着显示的效果,可以使用 CSS 的 writing-mode 属性。writing-mode 属性控制文本的方向,可以让文本垂直或者倾斜显示。
具体实现方法如下:
1. 给 el-button 添加一个自定义的 class,比如 vertical-text。
2. 在 CSS 中添加以下样式:
```css
.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
white-space: nowrap;
}
```
上面的代码中,writing-mode 属性设置为 vertical-rl,让文本从上到下垂直显示。text-orientation 属性设置为 upright,让文本在竖直方向上直立显示。white-space 属性设置为 nowrap,防止文本换行。
3. 在 el-button 中添加竖直显示的文本内容。
完整的代码示例如下:
```html
<el-button class="vertical-text">竖直显示</el-button>
<style>
.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
white-space: nowrap;
}
</style>
```
在上面的代码中,el-button 的 class 设置为 vertical-text,CSS 中添加了 vertical-text 类的样式,el-button 中添加了竖直显示的文本内容。通过这些代码,就可以实现让 el-button 文字竖着显示的效果。