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

。
或 

。i18n.properties
文件中:换行:
\n
或\u000a
。
推荐:* 与 回车符结合使用:
\r\n
或 \u000d\u000a
。
或者,考虑使用 模板文字,而不是手动连接上述字符(即简单地将
"..."
替换为 `...`
)。
<br>
(在 XML 中:<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 in Timeline items (XML)"
/>
<HBox id="myBox" justifyContent="SpaceAround">
<Text
text="This is
a 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 中渲染新行。
在 DOM 中渲染文本可以通过 .text(/*...*/)
中的API
RenderManager
来实现。然而,即使文本包含上述换行符,该 API 也不一定应用换行符。在这种情况下, white-space
属性 pre-line
可以应用于控件的 CSS 样式:
.myControlWithText {
/* ...; */
white-space: pre-line; /* Allows line break characters to be applied */
}
而不是
您可以使用表达方式:“
”。
例如:
Text="{TOPOLINO} - {=${PAPERINO} === 'NA' || ${PAPERINO} === 0 ? '---' : ${PAPERINO}}
{PAPERONE} "
您可以使用embeddedControl聚合来使用文本控件 在时间轴项目内
<u:TimelineItem>
<u:embeddedControl><Text text="First Line\n SecondLine"></Text></u:embeddedControl>
</u:TimelineItem>