css - 如何在 GWT 自定义日志记录区域中包装日志行？

Question

在 GWT 中，可以通过安装 HasWidgetsLogHandler 创建自定义日志记录区域.在我的例子中，这是一个 VerticalPanel。不幸的是，页面的其余部分被日志输出扭曲了，太宽了。如何换行？

HasWidgetsLogHandler 为每个日志条目添加一个 HTML 元素。我尝试为 UiBinder 中的各个元素设置样式，但这没有用:

<ui:style>
  @external gwt-HTML;
  .gwt-HTML {
    white-space: normal;
  }
</ui:style>

同样，添加 overflow: hidden(这本来是一个不太吸引人的选项)没有任何效果。

感谢您的指点。

Answer 1

VerticalPanel 以 HTML 表格的形式实现。虽然您可以使用它，但我通常会推荐使用 FlowPanel。

在 FlowPanel 上，您可以设置以下属性:

white-space: normal;
word-wrap: break-word; 

word-wrap是 CSS3，但许多浏览器都支持:http://caniuse.com/wordwrap .它允许在每个字符后包裹长词。对于不支持它的浏览器，您可能需要添加 overflow: hidden . (或者考虑与 overflow: auto 一起设置固定宽度。)

如果您确实需要使用 VerticalPanel，请参阅 Word-wrap in an HTML table (您必须在 <td> 上设置自动换行)。