logo标签列表

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

javascriptxmlsapui5newlineline-breaks
8

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

<u:TimelineItem text="First Line\n SecondLine" />
2个回答
10

以下字符可用于在文本控件中添加新行：

  • 在 XML 视图或 XML 片段中：

    • 换行符：&#10; 或 &#x0A;。
    • 推荐使用：* 与 回车符 结合使用：&#13;&#10; 或 &#x0D;&#x0A;。

  • 在 JS 或 i18n.properties 文件中：

    • 换行符：\n 或 \u000a。

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

    • 或者，考虑使用 模板文字 代替手动连接上述字符（即将 "..." 替换为 `...`）。

  • 某些 UI5 控件允许直接使用 HTML 标签<br>（在 XML 中为：&lt;br>）：

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


这里有一个使用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>

* 在UI5的早期版本中，TimelineItem存在一个bug，导致无法显示多行文本。根据他们1.44.5版本的更新日志:

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

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

针对UI5控件开发者

通过RenderManager的API .text(/*...*/)可以在DOM中呈现文本。然而，即使文本包含上述换行符，该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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接