问题
In above image, I have a Grid created in Vaadin 14. Notice the red lines where the column titles were not wrapping.
I'm trying to figure out if it's possible (and safe/easy/standard) to get the column labels to wrap (like they would in Excel, for example).
Neither I nor my colleagues could figure out how to do so.
回答1:
You will need to adapt the Vaadin Grid styles as in the following snippet:
/* wrap text in grid column headers */
[part~="header-cell"] {
white-space: normal;
}
Include the CSS via @CssImport annotation, theming the grid:
@CssImport(value = "./styles/grid-styles.css", themeFor = "vaadin-grid")
public class YourViewOrLayout extends Composite<Div> {
...
}
The main confusion styling web components arises with the shadow DOM concept. Each web component has its own style scope. That means all HTML tags within the shadow DOM must be styled via a <style> tag within the shadow DOM. The web component (Vaadin Grid here) comes with styles but you can append your own styles using the @CssImport annotation as above. Try inspecting the HTML structure of a <vaadin-grid> tag with the developer tools of your browser (except IE/Edge) and you will notice the shadow DOM. However, some tags located under the web component will not be part of the shadow DOM. These are referenced by <slot>s and global styles will be applied to them. For Vaadin Grid, the cell contents are slotted.
Note: Previous versions of Vaadin Flow had a slightly different way to include custom web component styles. See documentation.
来源：https://stackoverflow.com/questions/60250227/can-the-text-in-a-column-header-wrap-to-multiple-lines-in-a-grid-in-vaadin-14