Как отформатировать или стилизовать текст в textarea? - PullRequest
Новая
       4

Как отформатировать или стилизовать текст в textarea?

1 голос
/ 10 марта 2020

Мне нужно создать текстовую область для отображения данных, она должна выглядеть следующим образом (ожидаемое поведение):

enter image description here

Это мой текущий пользовательский интерфейс (текущее поведение):

enter image description here

Это мой HTML: 

<textarea disabled class="bgYellow" rows="6">{{text1}}</textarea>

Это мой машинописный код: 

  invoiceNo = '1000799758-00';
  status = 'Spark';
  palletLP = '';
  needAudit = 'NO';

  text1 = 'Invoice No.:  ' + this.invoiceNo + '\n' +
          'Status:  ' + this.status + '\n' +
          'Pallet LP:  ' + this.palletLP + '\n' +
          'Audit?:  ' + this.needAudit;

Может кто-нибудь сказать мне, как Можно ли выровнять эту метку № счета-фактуры по левому краю, данные по правому. Это как Bootstrap стиль сетки, но я не уверен, как это сделать.

Ответы [ 2 ]

0 голосов
/ 10 марта 2020

измените свой код на 

text1 =  ' Invoice No.: ' + this.invoiceNo + '\n' +
      '      Status: ' + this.status + '\n' +
      '   Pallet LP: ' + this.palletLP + '\n' +
      '      Audit?: ' + this.needAudit;

А затем измените текстовую область, чтобы использовать терминал (шрифт фиксированной ширины), используя css, мы надеемся, решит проблему.

Изменение шрифта области текста

0 голосов
/ 10 марта 2020

Используйте один обратный тик: 

 text1 = `
Invoice No, : 1
Status      : 2
Pallet LP   : 3
...         : 4`
}

https://stackblitz.com/edit/angular-aewrtv?file=src / app / app.component.ts

...