antdv Progress 进度条 实现环内内容换行 踩坑避雷

修改前样式                                                        修改后样式         

                                        

问题：在API format属性内换行符 /n 失效、

解决方法: ①添加样式 style=“white-space: pre;” 识别 ‘\n’

                ②css 样式定位到需要换行的元素 新增属性"white-space: pre-wrap;"

未修改前代码：

          <a-progress type="circle"
                      :width="120"
                      :strokeWidth="10"
                      :format="percent => `30`  + '\n\n'+ `未完成`"
                      :percent="30"
                      stroke-linecap="square"
          >

①修改后代码：

          <a-progress type="circle"
                      :width="120"
                      style="white-space: pre;"
                      :strokeWidth="10"
                      :format="percent => `30`  + '\n\n'+ `未完成`"
                      :percent="30"
                      stroke-linecap="square"
          >

② 修改后css 样式

/deep/ant-progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.65);
  line-height: 1;
  text-align: center;
  transform: translate(-50%, -50%);
  white-space: pre-wrap !important;  //提高指定样式规则的应用优先权（优先级）
}