Sapui5 如何包装复选框标签

我正在使用

sap.m

构建一个简单的移动应用程序。我制作了一个VBox来保存一些复选框，并将其嵌入到页面中

盒子的宽度正好是屏幕的宽度（在Chrome上的iPhone5设备模式下为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）

---

有什么方法可以“包装”标签，使其向下推动其他项目，并将文本放入框中吗？

您可以向复选框中添加样式类，并使用

空白：正常
。SAPUI5自动将
空白：
放入
无换行

已编辑为Jorgs最终解决方案

例如：

oTicks.addStyleClass('YourClassName');

在CSS中：

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

，
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({
定义：`
`,
模型：新的JSONModel（{wrapping:false}），
})。然后（view=>view.placeAt（“content”；）

您对
空白
的评论是正确的。然而，我最终将该类应用于
复选框
，css是
。YourClassName标签
。显然，只有标签有偏差（vbox和children设置为
normal
）。这在任何情况下都适用于UI5 1.26.x。我还添加了
行高：normal
和
垂直对齐：middle
，否则会流到下一个标签上。如果您将其添加到您的答案中，我将接受并投票。有关使用UI5 1.54及以上版本的读者，请参阅。避免使用自定义CSS。