如何在 textarea 中格式化或设置文本样式？

Posted 2023-05-07

【中文标题】如何在 textarea 中格式化或设置文本样式？

【英文标题】：How to format or style text in textarea?

【发布时间】：2020-06-22 12:48:00

【问题描述】：

我需要创建一个文本区域来显示数据，它应该看起来像这样（预期的行为）：

这是我当前的 UI（当前行为）：

这是我的 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 网格样式，但我不知道该怎么做。

【问题讨论】：

看起来你没有为你的 textarea 使用等宽字体.. textarea 除了使用制表符和空格之外没有任何其他格式选项。这需要是文本区域吗？..

我使用了 font-family: monospace;我刚刚删除以在一行中制作 html 代码。是的，我们的项目正在使用 Angular 来模仿一个非常古老的 Java 应用程序...谢谢您的回答。

【参考方案1】：

使用单个反引号：

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

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

【讨论】：

我喜欢这个。谢谢！

【参考方案2】：

把你的代码改成

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

然后使用 css 将文本区域更改为使用终端（固定宽度字体）将有望解决问题。

Changing The Font Of Text Area