我在 LayoutPanel 内的 ScrollPanel 内的 FlexTable 单元格中有标签。ScrollPanel(及其父 LayoutPanel)的大小是根据用户设备的窗口大小动态设置的(因此不使用精确的 CSS 大小)。FlexTable、它的单元格和标签的宽度设置为100%
. 此外,FlexTable 设置为具有fixed
表格布局。并且标签被赋予了自动换行设置break-word
. 在大多数情况下,这可以正常工作。带有短单词的句子可以毫无问题地换行到下一行,并且 Label 保持与包含表格单元格的大小相同。但是,当一个单词需要分成两行以适应时(这种情况经常发生,因为页面链接经常被放置在这里),标签的宽度会自动扩展到包含它的单元格的大小之外。我知道这是 GWT 自行调整标签大小的结果,但我不确定如何防止这种情况。我尝试将分词设置为break-all
,但这会导致到达行尾的短词被打破(比如“this”变成“th”和“is”),这很愚蠢。无论如何我可以强制 GWT 标签仅是其包含单元格宽度的 100%,并且在保持此设置动态的同时不让它超出该宽度?非常感谢!
2 回答
I actually don't think there's a good solution to this; either you only allow breaking at normal points (white spaces) or you can break inside words, but then there's no way to prevent breaking of short words with just CSS.
The best suggestion I can give, since links are causing problems, is to shorten links somehow, maybe only display a finite number of characters; if the links are clickable, this shouldn't be a huge problem.
Alternatively, you could set a fixed size for the labels or the cells (can still be in %) and use overflow-x
to hide any bits of text poking out if there's a really long word that cannot be broken.
显然百分比会导致问题。如果您为宽度指定 px 值,则长字符串将在达到限制后换行。当然,由于我是动态调整大小的,我需要以更复杂的方式获取这个 px 值。这样做的方法是使用Window.getClientWidth()
获取用户屏幕的宽度,然后每次使用这个百分比时,您需要根据您在 CSS 中使用的百分比手动计算 px 值(因为得到 33 100 像素的 % 为您提供 33 像素,您需要手动检查何时应添加额外的像素,以免丢失任何像素),然后对于滚动面板,您可以通过减去获得不包括滚动条的面板宽度NativeVerticalScrollbar.getNativeScrollbarWidth()
从您当前的面板宽度。这种方式对我来说效果很好,因为无论如何我已经根据窗口大小计算每个面板的像素大小,直到滚动面板。