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

Question

Answer 1

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

在 XML 视图或 XML 片段中：
- 换行：
```
&#10;
```
  或
```
&#x0A;
```
  。
- 推荐：* 与 回车符结合使用：
```
&#13;&#10;
```
  或
```
&#x0D;&#x0A;
```
  。
在 JS 或
```
i18n.properties
```
文件中：
- 换行：
```
\n
```
  或
```
\u000a
```
  。
- 推荐：* 与 回车符结合使用：
```
\r\n
```
  或
```
\u000d\u000a
```
  。
- 或者，考虑使用 模板文字，而不是手动连接上述字符（即简单地将
```
"..."
```
  替换为
```
`...`
```
  ）。
某些 UI5 控件允许开箱即用
HTML 标签 <br>
（在 XML 中：
```
&lt;br>
```
）：
- ```
sap.m.MessageStrip
```
  自 UI5 v1.85 起：API 参考、示例
- ```
sap.m.FormattedText
```
  ：API参考

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

这是一个带有

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 的变更日志：

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

如果使用控件

sap.m.Text

，请记住启用属性

renderWhitespace

和

wrapping

以便在 DOM 中渲染新行。

对于 UI5 控件开发人员

在 DOM 中渲染文本可以通过 .text(/*...*/)

 中的

API RenderManager

来实现。然而，即使文本包含上述换行符，该 API 也不一定应用换行符。在这种情况下，

white-space

属性

pre-line

可以应用于控件的 CSS 样式：

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

Answer 2

而不是您可以使用表达方式：“
”。例如： Text="{TOPOLINO} - {=${PAPERINO} === 'NA' || ${PAPERINO} === 0 ? '---' : ${PAPERINO}}
{PAPERONE} "

Answer 3

您可以使用embeddedControl聚合来使用文本控件在时间轴项目内

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

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

问题描述投票：0回答：3

3个回答

在 XML 视图或 XML 片段中：

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

对于 UI5 控件开发人员

最新问题

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

问题描述 投票：0回答：3

3个回答

在 XML 视图或 XML 片段中：

在 JS 或 i18n.properties 文件中：

对于 UI5 控件开发人员

最新问题

问题描述投票：0回答：3

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