GWT - 标签没有正确环绕文本？

Question

我在 LayoutPanel 内的 ScrollPanel 内的 FlexTable 单元格中有标签。 ScrollPanel（以及它的父 LayoutPanels）的大小是根据用户设备的窗口大小动态设置的（因此不使用精确的 CSS 大小）。 FlexTable、它的单元格和标签的宽度设置为100%。此外，FlexTable 设置为具有fixed 表格布局。并且标签被赋予break-word 的自动换行设置。在大多数情况下，这可以正常工作。带有短单词的句子可以毫无问题地换行到下一行，并且 Label 保持与包含表格单元格的大小相同。但是，当一个单词需要分成两行以适应时（这种情况经常发生，因为页面的链接经常放置在这里），标签的宽度会自动扩展到包含它的单元格的大小之外。我知道这是 GWT 自行调整标签大小的结果，但我不确定如何防止这种情况。我尝试将分词设置为break-all，但这会导致到达行尾的短词被打破（比如“this”变成“th”和“is”），这很愚蠢。无论如何我可以强制 GWT 标签仅是其包含单元格宽度的 100%，并且在保持此设置动态的同时不让它超出该宽度？非常感谢！

Answer 1

我实际上不认为有一个好的解决方案；要么你只允许在正常点（空格）打断，要么你可以在单词内部打断，但是没有办法阻止只用 CSS 打断短词。

由于链接会引起问题，我能给出的最佳建议是以某种方式缩短链接，也许只显示有限数量的字符；如果链接是可点击的，这应该不是什么大问题。

或者，您可以为标签或单元格设置固定大小（仍可以以 % 为单位）并使用 overflow-x 隐藏任何突出的文本，如果有一个非常长的单词不能被打破。

Answer 2

显然百分比会导致问题。如果您为宽度指定 px 值，则长字符串将在达到限制后换行。当然，由于我是动态调整大小的，所以我需要以更复杂的方式获取这个 px 值。这样做的方法是使用Window.getClientWidth() 来获取用户屏幕的宽度，然后每次使用它的百分比时，您需要根据您在 CSS 中使用的百分比手动计算 px 值（由于获得 100 像素的 33% 为您提供 33 像素，因此您需要手动检查何时应添加额外的像素，以免丢失任何像素），然后对于滚动面板，您可以获得不包括滚动条的面板宽度通过从当前面板宽度中减去 NativeVerticalScrollbar.getNativeScrollbarWidth()。这种方式对我来说效果很好，因为我已经根据窗口大小计算每个面板的像素大小，直到滚动面板。