在上图中，我有一个Grid https://vaadin.com/components/vaadin-grid在 Vaadin 14 中创建。请注意列标题未换行的红线。
我试图弄清楚是否有可能（并且安全/简单/标准）让列标签换行（例如，就像在 Excel 中一样）。
我和我的同事都不知道如何做到这一点。
您需要调整 Vaadin 网格样式，如以下代码片段所示：
/* wrap text in grid column headers */
[part~="header-cell"] {
white-space: normal;
}
通过以下方式包含 CSS@CssImport注释，网格主题：
@CssImport(value = "./styles/grid-styles.css", themeFor = "vaadin-grid")
public class YourViewOrLayout extends Composite<Div> {
...
}
样式 Web 组件的主要混乱源自影子 DOM 概念。每个 Web 组件都有自己的样式范围。这意味着 Shadow DOM 中的所有 HTML 标签都必须通过<style>影子 DOM 中的标签。 Web 组件（此处为 Vaadin Grid）附带样式，但您可以使用@CssImport注释如上。尝试检查 HTML 结构<vaadin-grid>使用浏览器（IE/Edge 除外）的开发者工具标记，您会注意到影子 DOM。但是，位于 Web 组件下的某些标签不会成为影子 DOM 的一部分。这些被引用<slot>s 和全局样式将应用于它们。对于 Vaadin Grid，单元格内容是开槽的。
注意：Vaadin Flow 的早期版本包含自定义 Web 组件样式的方式略有不同。看文档 https://vaadin.com/docs/v14/flow/theme/migrate-p2-to-p3.html.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
