html - 格式化数据 block

Question

我使用这个 Angular 代码将文本格式化为数据 block 到配置文件页面:

<div class="element-box">
  <div class="details-wrapper">
    <p><b class="label">Remote IP</b>{{apiattempt.remote_ip}}</p>
    <p><b class="label">Raw Request</b>
      <pre>
        {{apiattempt.raw_request | xmlBeautyfier }}
      </pre>
    <p><b class="label">Raw Response</b>{{apiattempt.raw_response | xmlBeautyfier }}</p>
  </div>
</div>

CSS 代码:

.details-wrapper {
  padding: 20px 0;

  h4 {
    margin-bottom: 0;
  }

  .activity {
    margin-bottom: 20px;
    font-size: .8em;
    color: #9e9e9e;
  }

  p {
    .label {
      display: inline-block;
      width: 100px;
      margin-right: 10px;
    }
  }
}

但我得到了这个视觉结果:

如您所见，XML 数据未正确对齐。有什么方法可以像文本的其余部分一样将其移动对齐吗？

Answer 1

我认为您可以使用 [innerHTML] 并将您的内容传递到 pre 标记中。但是您需要确保它的目的是正确的。

<p><b class="label">Raw Response</b>
  <pre [innerHTML]="apiattempt.raw_response"></pre>
</p>

Text in a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.