Question

我有一个大文本要显示在IconTabBar的每个标签中。

一切正常。

但是，文字没有完整显示。问题：＆＃34;我要显示的大文字＆＃34;显示为＆＃34;我的大文本.....＆＃34;

我无法在开发者网站上找到任何解决方案。有什么方法可以显示完整的文字而不是.....？

Answer 1

有三种方法可以定义IconTabFilter来显示文本。

无图标：显示长文字
使用Icon和Horiontal Design：为文本提供更多空间，仍然显示......如果文本很长。
使用图标和垂直设计：使用最小的水平空间。

请检查并运行代码段以查看不同的显示效果。

sap.ui.controller("test.controller", {

   
});

var oView = sap.ui.xmlview({
    viewContent: jQuery("#view1").html()
});
oView.placeAt("content");

<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"></script>
<script id="view1" type="sapui5/xmlview">
    <mvc:View xmlns:l="sap.ui.layout" controllerName="test.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.ui.layout.form">

        <l:VerticalLayout>

            <IconTabBar>
                <items>
                    <IconTabFilter text="Large text Large text">
                        <Text text="Large text Large text " />
                    </IconTabFilter>
                    <IconTabFilter text="Very Large text Very Large text Very Large text">
                        <Text text="Very Large text Very Large text " />
                    </IconTabFilter>


                </items>
            </IconTabBar>

            <IconTabBar>
                <items>
                    <IconTabFilter icon="sap-icon://hint" text="Large text Large text">
                        <Text text="Large text Large text " />
                    </IconTabFilter>

                </items>
            </IconTabBar>

            <IconTabBar>
                <items>
                    <IconTabFilter icon="sap-icon://attachment" design="Horizontal" text="Large text Large text">
                        <Text text="Large text Large text " />
                    </IconTabFilter>

                </items>
            </IconTabBar>

            <IconTabBar>
                <items>
                    <IconTabFilter icon="sap-icon://attachment" design="Horizontal" text="Very Large text Very Large text">
                        <Text text="Very Large text Very Large text " />
                    </IconTabFilter>

                </items>
            </IconTabBar>

        </l:VerticalLayout>
    </mvc:View>
</script>

<boy class="sapUiBody" id="content" />

Answer 2

如果将IconTabFilter与图标结合使用，则会显示省略号。可以只使用文本，没有图标，然后根本没有截断。如果使用文本和图标，垂直设计只允许非常短的文本，水平设计允许更长的文本，但仍然在几个字符之后文本将被截断。

由于IconTabBar是一个sap.m控件，它也可以在移动设备上运行，因此会有截断。

如果您想使用图标+文字，您还可以为仍然太长的文本设置工具提示。

如果你真的想拥有Icons +长文本，你可以覆盖设置为获得此行为的css样式。

这将是以下规则：

.sapMITBFilter .sapMITBText {
width: 5rem;
overflow: hidden;
text-overflow: ellipsis;
}

但请注意，如果您更改了css，可能会出现其他问题，并且css将来可能会发生变化。

大文本在SAPUI5中显示为.....

2 个答案: