Question

我陷入了一个相当简单的问题。这是一个现有的代码片段，我试图进行更改，以便它不会在调整大小时中断。我有一个按钮，里面有一个文字。在窗口调整大小时，按钮会缩小，我的文本会被剪裁。前端在SAP UI5中，我通过浏览器运行应用程序。这是我在UI5中的代码片段。

var oMatrix = new sap.ui.commons.layout.MatrixLayout({layoutFixed : true, height : '100px', columns : 2 });

var oCell = new sap.ui.commons.layout.MatrixLayoutCell();
var oButton = new sap.ui.commons.Button({text : "VERY VERY VERY VERY LONG TEXT"}).addStyleClass("oButtonStyle");;

oCell.addContent(oButton);
oMatrix.createRow(oCell,"");

以上样式如下：

.oButtonStyle{
 width: 90%;
 direction: inherit;
 text-align: left;
 margin-left: 15px;
 display:block;
 }
.oButtonStyle .Txt{
  text-overflow: ellipsis !important;
  width: 175px;
  overflow: hidden;
}

这里，“txt”是一个样式类，可以应用于该按钮中的任何文本。

在最小化窗口后，我只能看到“VERY VER”。我也使用了溢出，白色空间和显示块。我无法弄清楚我哪里出错了。请帮忙。

提前致谢。

Answer 1

首先，你不需要按钮内的span元素。

以下是两种可能的解决方案。

移除nowrap，当您调整窗口大小时，该按钮将更改为2行或更多行，从而增加高度。

.buttonStyle{ width: 90%; text-align: left; overflow: hidden; }

这是你的demo。

-OR -

添加最小宽度。这样按钮会缩小到某一点，并在此之后保持不变。请注意这个解决方案，因为它可能会在某些时候破坏你的风格，但这取决于你的代码，完全可以避免。

.buttonStyle{ width: 90%; text-align: left; min-width: 275px; }

jsfiddle可用。

按钮内的文字正在调整窗口大小

1 个答案: