格式化一大堆文本

Question

我使用的是一个API，对于其中一个响应，它是一大串文本，我想让它更多地"可读的"；比方说，数据是这样的：

In a bowl, mash the banana with a fork until it resembles a thick purée. Stir in the eggs, baking powder and vanilla.rnHeat a large non-stick frying pan or pancake pan over a medium heat and brush with half the oil. Using half the batter, spoon two pancakes into the pan, cook for 1-2 mins each side, then tip onto a plate. Repeat the process with the remaining oil and batter. Top the pancakes with the pecans and raspberries.

在Angular中，有没有一种方法可以让它更像这样：

In a bowl, mash the banana with a fork until it resembles a thick purée.
Stir in the eggs, baking powder and vanilla.
Heat a large non-stick frying pan or pancake pan over a medium heat and brush with half the oil.
Using half the batter, spoon two pancakes into the pan, cook for 1-2 mins each side, then tip onto a plate.
Repeat the process with the remaining oil and batter.
Top the pancakes with the pecans and raspberries.

基本上，在每个点(.(

谢谢大家

Answer 1

答案是从这个答案派生出来的，请投票给那个答案！

html

<div [innerHTML]="name | readable"></div>

javascript

import { DomSanitizer } from '@angular/platform-browser';
import { PipeTransform, Pipe } from '@angular/core';
@Pipe({ name: 'readable' })
export class ReadablePipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value) {
const newValue = value.split('.').join('.<br/>');
return this.sanitized.bypassSecurityTrustHtml(newValue);
}
}

Stacklitz演示

Answer 2

1. 一个可能的解决方案是获取字符串并根据每个点(.(对其进行拆分，然后添加一个"；\n〃；

2. 使其可读性更强的另一种可行方法是将文本放置在容器内的<p>标记中，并使用CSS属性设置text-align: justify。