UI5中如何给文本添加换行符?

Man*_*ath 8 javascript xml newline line-breaks sapui5

转义字符\n和 Unicode 字符\u000a仅在 JavaScript 中有效。但是,我尝试在 XML 视图中添加换行符,如下所示。但不起作用:

<u:TimelineItem text="First Line\n SecondLine" />
Run Code Online (Sandbox Code Playgroud)

Bog*_*ann 10

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

  • 在 XML视图或 XML 片段中:

    • 换行&#10;&#x0A;.
    • 推荐: * 与回车符结合使用:&#13;&#10;&#x0D;&#x0A;
  • 在 JSi18n.properties文件中:

    • 换行\n\u000a.

    • 推荐: * 与回车符结合使用:\r\n\u000d\u000a

    • 或者,考虑使用模板文字,而不是手动连接上述字符(即简单地替换"..."为)。`...`

  • 一些 UI5 控件允许开箱即 用的HTML 标签<br>(在 XML: 中):&lt;br>

* 请参阅不同换行格式的问题。对于大多数互联网协议,建议使用与回车符的组合。


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

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");
});
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

*TimelineItem在 UI5 的早期版本中存在阻止多行的错误。根据 1.44.5 的变更日志:

[修复] sap.suite.ui.commons.Timeline:改进了多行文本的渲染


如果sap.m.Text使用该控件,请记住启用属性renderWhitespacewrapping在 DOM 中渲染新行。


对于 UI5 控件开发人员

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

.myControlWithText {
  /* ...; */
  white-space: pre-line; /* Allows line break characters to be applied */
}
Run Code Online (Sandbox Code Playgroud)