GWT - 标签没有正确包装文本？

Posted 2021-05-05

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

答案

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

我可以给出的最佳建议，因为链接导致问题，是以某种方式缩短链接，可能只显示有限数量的字符;如果链接是可点击的，这应该不是一个大问题。

或者，您可以为标签或单元格设置固定大小（仍然可以是％），并使用overflow-x隐藏任何文本，如果有一个非常长的单词无法被破坏。

另一答案

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