【问题标题】：How to add a line break to text in UI5?如何在 UI5 中为文本添加换行符？
【发布时间】：2018-04-19 06:33:00
【问题描述】：

转义字符 \n 和 Unicode 字符 \u000a 仅适用于 JavaScript。但是，我试图在 XML 视图中添加一个换行符，如下所示。但不起作用：

<u:TimelineItem text="First Line\n SecondLine" />

【问题讨论】：

标签： javascript xml sapui5 newline line-breaks

【解决方案1】：

文本控件中的新行可以添加以下字符：

在 XML 视图或 XML 片段中：
- 换行：&#10; 或 &#x0A;。
- 推荐：* 结合回车：&#13;&#10; 或&#x0D;&#x0A;。
在 JS 中 或 i18n.properties 文件：
- 换行：\n 或 \u000a。
- 推荐：* 结合回车：\r\n 或\u000d\u000a。
- 或者，考虑使用template literals 而不是手动连接上述字符（即只需将"..." 替换为`...`）。
一些 UI5 控件允许开箱即用 HTML tag  （在 XML 中：&lt;br>）：
- sap.m.MessageStrip 从 UI5 v1.85 开始：API reference, Sample
- sap.m.FormattedText: API reference

^{* 见 Issues with different newline formats。对于大多数互联网协议，建议使用与回车组合。}

这是一个带有 sap.suite.ui.commons.TimelineItem* 和 sap.m.Text 的 UI5 演示：

globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/m/Text",
], async (XMLView, Text) => {
  "use strict";
  
  const view = await XMLView.create({
    definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
      <App xmlns="sap.m" autoFocus="false">
        <Page showHeader="false" class="sapUiResponsiveContentPadding">
          <commons:TimelineItem xmlns:commons="sap.suite.ui.commons"
            text="Multiline supported&#10;in Timeline items (XML)"
          />
          <HBox id="myBox" justifyContent="SpaceAround">
            <Text
              text="This&#10;is&#x0A;a&#13;&#10;text (created in XML view)!"
              renderWhitespace="true"
            />
          </HBox>
        </Page>
      </App>
    </mvc:View>`,
  });
  
  const textCreatedInJS = new Text({
    renderWhitespace: true,
    text: "And this\nis\u000aanother\r\ntext (created in JS)!",
  });
  view.byId("myBox").addItem(textCreatedInJS);
  view.placeAt("content");
});

<script id="sap-ui-bootstrap"
  src="https://ui5.sap.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.suite.ui.commons"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-oninit="onUI5Init"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody"></body>

^{* TimelineItem 在 UI5 的早期版本中有一个错误，阻止了多行。根据他们对 1.44.5 的更新日志：

[FIX] sap.suite.ui.commons.Timeline：改进了多行文本的渲染}

如果使用控件sap.m.Text，请记住启用属性renderWhitespace 和wrapping 以便在DOM 中呈现新行。

对于 UI5 控件开发人员

在 DOM 中渲染文本可以通过 API .text(/*...*/) 和 RenderManager 来实现。但是，即使文本包含上述换行符，该 API 也不一定应用换行符。在这种情况下，white-space 属性 pre-line 可以应用于控件的 CSS 样式：

.myControlWithText {
  /* ...; */
  white-space: pre-line; /* Allows line break characters to be applied */
}

【讨论】：

【解决方案2】：

您可以使用 embeddedControl 聚合来使用文本控件在 TimelineItem 内

<u:TimelineItem>
      <u:embeddedControl><Text text="First Line\n SecondLine"></Text></u:embeddedControl>
</u:TimelineItem>

【讨论】：

如何在 UI5 中为文本添加换行符？

在 XML 视图或 XML 片段中：

在 JS 中或 `i18n.properties` 文件：

对于 UI5 控件开发人员

在 XML 视图或 XML 片段中：

在 JS 中 或 i18n.properties 文件：

对于 UI5 控件开发人员

在 JS 中或 `i18n.properties` 文件：