Question

我试图根据从后端接收的值显示标题。当文本值较小时，它恰好适合图表区域。但是，当较大的文本值来自后端时，它将被隐藏。

从服务器返回大文本值时，有什么方法可以将其推到新行。

我知道\ n会将文本移到新行。但是我的数据是动态的，因此我不确定何时添加\ n。任何帮助将不胜感激。

我在想的一种方法是计算字符串的长度并添加'\ n'，不确定这是否正确。

这是我的代码：

/ * app.component.ts ** /

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div id="chart-wrapper">
    <kendo-chart [seriesColors]="['orange', '#ffe']">
    <kendo-chart-title text={{title}}></kendo-chart-title>
      <kendo-chart-legend position="top"></kendo-chart-legend>
      <kendo-chart-area background="#eee" [margin]="0"> </kendo-chart-area>
      <kendo-chart-series>
        <kendo-chart-series-item type="pie"
          [data]="pieData"
          field="value"
          categoryField="category">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    <div>
  `
})
export class AppComponent {
  public pieData: any = [
    { category: 'Eaten', value: 0.42 },
    { category: 'Not eaten', value: 0.58 }
  ]

  public title = "this is test title to check whether it breaks in new line or not";
}

该问题的Stackblitz问题：https://stackblitz.com/edit/angular-aqdtsd?file=app/app.component.ts

Answer 1

解决此问题的简单方法是在组件上设置标题格式。只需在标题中添加 "\n" 即可

public title = "this is test \n title to check whether it breaks in new line or not";

这是一个逻辑

this.title = this.title.replace(/(.{30})/g,"\n")

STACKBLITZ DEMO

如何在新行中显示剑道图标题

1 个答案: