如何包装复选框标签

Question

我正在使用 sap.m 构建一个简单的移动应用程序。我制作了一个 VBox 来容纳几个复选框并将其嵌入到页面中。

框的宽度恰好是屏幕的宽度（在 Chrome 上的 iPhone 5 设备模式下为 320px）。复选框的标签不符合此宽度，只是超出了宽度。

var oTicks = new sap.m.VBox();
oTicks.addItem(new sap.m.CheckBox({
    name: 'name',
    text: 'Are the tools and equipment I am going to use in safe working order?'
}));

正如您在此处的屏幕截图中所见，第三个复选框的标签 > 320px（准确地说是 454）。

有什么方法可以 "wrap" 标签，使其将其他项目向下推，并适合框内的文本？

Answer 1

您可以将 StyleClass 添加到 CheckBox 并使用 white-space: normal。 SAPUI5 自动把 white-space: 放到 no-wrap.

已编辑为 Jorgs 最终解决方案！

示例：

oTicks.addStyleClass('YourClassName');

在CSS中：

.YourClassName label {
   white-space: normal;
   line-height: normal;
   vertical-align: middle;
}

Answer 2

As of version 1.54、sap.m.CheckBox 支持属性 wrapping 控件可以用来判断标签的文本是否换行。默认值为 false（无换行）。

演示

sap.ui.require([
  "sap/ui/core/Core",
], Core => Core.attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => XMLView.create({
  definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" height="100%">
    <App>
      <Page title="Checkbox Wrapping">
        <headerContent>
          <Switch state="{/wrapping}"
            customTextOff=" "
            customTextOn=" "
          />
        </headerContent>
        <VBox width="320px" backgroundDesign="Solid">
          <CheckBox
            text="Are the tools and equipment I'm going to use in safe working order?"
            wrapping="{/wrapping}"
          />
        </VBox>
      </Page>
    </App>
  </mvc:View>`,
  models: new JSONModel({ wrapping: false }),
}).then(view => view.placeAt("content")))));

<script id="sap-ui-bootstrap"
  src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_fiori_3_dark"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

如何包装复选框标签

How to Wrap CheckBox Labels

sapui5

演示