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?'
}));

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

有什么方法可以“包装”标签，以便将其他项目向下推，并将文字放在盒子里面？

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（无包装）。

演示

＆＃13;

sap.ui.getCore().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%"
    displayBlock="true"
  >
    <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 am going to use in safe working order?"
            wrapping="{/wrapping}"
          />
        </VBox>
      </Page>
    </App>
  </mvc:View>`,
  models: new JSONModel(),
}).then(view => view.placeAt("content"))));

＆＃13;

<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_belize"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="true"
  data-sap-ui-xx-xml-processing="sequential"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

＆＃13;

除了CheckBox之外， sap.m .Text ， .Label ， .Title ， .Link 也支持wrapping。

如何包装CheckBox标签

2 个答案:

演示