我在 Angular 7项目中使用了 ag-grid 表,但无法在页眉单元格文本中跨两行
我现在拥有的是 header ,例如:
Preferred Option
我希望成为
Preferred
Option
但是,我得到的只是 Preferred 单词或 Preferred ...
这是应用的CSS:
<!--AG-HEADER-ROOT-->
element.style {
height: 56px;
min-height: 56px;
}
.ag-header-viewport {
box-sizing: border-box;
height: 100%;
overflow: hidden;
width: 0px;
min-width: 0px;
-ms-flex: 1;
flex: 1;
}
div { //ag-header-container
display: block;
}
.ag-theme-material .ag-header-cell, .ag-theme-material .ag-header-group-cell {
line-height: 56px;
padding-left: 24px;
padding-right: 24px;
}
更分层的视图在这里:
ag-header {
-ms-flex-direction: row;
flex-direction: row;
box-sizing: border-box;
white-space: nowrap;
width: 100%;
display: -ms-flexbox;
display: flex;
.ag-header-row {
position: absolute;
}
.ag-header-cell {
padding-left: 5px;
padding-right: 0;
box-sizing: border-box;
display: inline-block;
height: 100%;
position: absolute;
vertical-align: bottom;
.ag-header-cell-text {
padding-left: 0;
padding-right: 0;
}
}
}
在其他类似的已提出的问题中详细介绍的直接方法仍然没有结果:
.ag-header-cell-label {
text-overflow: clip;
overflow: visible;
white-space: normal;
}
如何获取两行.ag-header-cell?
答案 0 :(得分:0)
对于将来的麻烦查找者,我设法通过以下方法解决了我的问题:
我将.ts文件中的标题文本设置为:
ngOnInit(): void {
this.columnDefs = [
{
headerName: 'Line1\nLine2', field: 'field'
}
];
}
并应用了以下CSS属性:
.ag-header-cell-label{
white-space: pre;
}
.ag-header-cell {
border: 1px;
padding-left: 10px;
padding-right: 0;
white-space: pre;
.ag-header-cell-text {
padding-top: 15px;
padding-left: 0;
padding-right: 0;
white-space: pre;
display: inline-block;
line-height:13px;
}
请注意 line-height 属性的用法,该属性可确保第二行位于第一行的下方,并且不会隐藏在某处。