我在一个ScrollPanel里面的FlexTable的单元格中有标签,它位于LayoutPanels内部。 ScrollPanel(及其父LayoutPanels)的大小是根据用户设备窗口的大小动态设置的(因此不使用精确的CSS大小)。 FlexTable,它的单元格和标签的宽度设置为100%
。此外,FlexTable设置为fixed
表格布局。并且标签被赋予break-word
的自动换行设置。在大多数情况下,这很好。短句的句子被包装到下一行没有问题,而且Label的大小与包含表格单元格的大小相同。但是,当一个单词需要分成两行以适应时(这经常发生,因为链接到页面经常放在这里),Label的宽度会自动扩展到超出包含它的单元格的大小。我知道这是GWT自己调整Label大小的结果,但我不知道如何防止这种情况。我已经尝试将单词分隔设置为break-all
,但是这会导致短语到达要删除的行的末尾(例如“this”变为“th”和“is”),这只是愚蠢的。无论如何,我可以强制GWT标签仅仅是它包含单元格宽度的100%而不是让它延伸到那个以上,同时仍然保持这个设置动态吗?非常感谢!
答案 0 :(得分:1)
我实际上认为没有一个很好的解决方案;要么你只允许在正常点(白色空格)打破,要么你可以打破内部单词,但是没有办法防止用CSS破坏短文。
我能给出的最佳建议,因为链接导致问题,是以某种方式缩短链接,可能只显示有限数量的字符;如果链接是可点击的,这应该不是一个大问题。
或者,您可以为标签或单元格设置固定大小(仍然可以是%),并使用overflow-x
隐藏任何文本,如果有一个非常长的单词无法被破坏。
答案 1 :(得分:0)
显然百分比会导致问题。如果为宽度指定px值,则长字符串一旦达到限制就会换行。当然,因为我正在动态调整大小,所以我需要以更复杂的方式获得此px值。这样做的方法是使用Window.getClientWidth()
来获取用户屏幕的宽度,然后每次使用这个百分比时,你需要根据你在用户屏幕中使用的百分比来手动计算px值。 CSS(因为得到100个像素中的33%会给你33个像素,你需要手动检查何时应该添加一个额外的像素,这样你就不会丢失任何像素),然后对于滚动面板你可以获得不包括的面板宽度通过从当前面板宽度中减去NativeVerticalScrollbar.getNativeScrollbarWidth()
滚动条。这种方式对我来说效果很好,因为我已经根据窗口大小计算每个面板的像素大小,直到滚动面板。