Angular Material List:如何防止mat-list-items包装内容？
Angular Material List:如何防止mat-list-items包装内容？
提问于 2018-08-31 04:41:30
在我的Angular Material应用程序中，我有一个包含多行(mat- list -item)的列表(mat-list)。
我试图阻止mat-list-item包装它们的内容。
例如，而不是这样：
IT架构师
在通用电气
它应该看起来像这样：
通用电气的
IT架构师
下面是html：
component.html：
<mat-list>
<mat-list-item class="no-wrap">
<h3 class="name"> {{firstName}} {{lastName}} </h3>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item class="no-wrap" *ngIf="position && company"> {{position}} at {{company}} </mat-list-item>
<div class="gap"></div>
<mat-list-item class="no-wrap">
<mat-icon>email</mat-icon>
<span class="email"> {{email}} </span>
</mat-list-item>
</mat-list>我试着用下面的CSS实现我的目标：
component.css：
.no-wrap {
word-wrap: break-word;
white-space: pre-wrap;
}然而，这不起作用。
如何防止角度材质列表中的项目对其包含的文本进行换行？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-31 04:48:07
<mat-list>
<mat-list-item class="no-wrap">
<h3 class="name"> <span class="nobreak"> {{firstName}} {{lastName}} </span> </h3>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item class="no-wrap" *ngIf="position && company"> <span class="nobreak"> {{position}} at {{company}} </span> </mat-list-item>
<div class="gap"></div>
<mat-list-item class="no-wrap">
<mat-icon>email</mat-icon>
<span class="email"> {{email}} </span>
</mat-list-item>
</mat-list>css
.no-wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}Stack Overflow用户
发布于 2021-04-06 06:07:01
运行Angular 11.X
另一种选择是在树周围添加一个滚动视口，然后将mat- tree -节点的CSS设置为空白: nowrap
<mat-card>
<mat-card-content>
<cdk-virtual-scroll-viewport itemSize="30" class="tree">
<ng-container *cdkVirtualFor="let item of dataSource"></ng-container>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent="20px" class="tree-node">
<button mat-icon-button disabled></button>
{{node.name}}
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="20px" class="tree-node">
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.name}}
</mat-tree-node>
</mat-tree>
</cdk-virtual-scroll-viewport>
</mat-card-content>
</mat-card>CSS
.type-icon {
color: #757575;
margin-right: 5px;
}
.tree-node {
height: 30px;
min-height: 30px;
white-space: nowrap;
}
.tree {
height: 600px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52105058
复制相关文章
相似问题
腾讯云开发者
