el-progress百分比跳掉第二行
时间: 2024-05-24 08:08:39 浏览: 22
el-progress 是 Element UI 中的一个进度条组件,可以用来展示操作进度等信息。如果希望百分比跳到第二行,可以使用 CSS 样式来实现。具体方法如下:
1. 给 el-progress 组件的外层 div 设置一个固定高度,比如说 40px。
2. 设置 el-progress 组件的 font-size 和 line-height 属性为 0,这样它们就不会占用高度了。
3. 给 el-progress 组件的百分比部分(即带有 class 为 "el-progress__text" 的元素)设置一个固定高度,并设置 line-height 和 display 属性,使其可以多行显示。
4. 可以根据需要添加一些其他的 CSS 样式来美化进度条的外观。
下面是示例代码:
```
<div style="height: 40px;">
<el-progress :percentage="50"
:stroke-width="18"
:text-inside="true"
:show-text="false"
class="my-progress">
<div class="el-progress__text" style="height: 20px; line-height: 20px; display: block;"></div>
</el-progress>
</div>
<style>
.my-progress .el-progress__text {
font-size: 14px;
color: #999;
}
</style>
```