gpt4 book ai didi

html - 当屏幕太小时,Angular Material 步进器标题消失

转载 作者:行者123 更新时间:2023-12-04 09:35:29 31 4
gpt4 key购买 nike

我正在使用垂直步进器,它适用于计算机屏幕。但是,当使用的屏幕太小而无法一次显示所有标题时,它会被替换为 ... .
我怎样才能让它使用换行符而不是隐藏标题?
我正在使用的代码:

    <mat-step [completed]="true" *ngFor="let experience of experiences" state="check" >
<ng-template matStepLabel>
<img class="logo title-content-element vertical-align" src="{{experience.logoPath}}"/>
<div class="spacer title-content-element vertical-align"></div>
<div class="spacer title-content-element vertical-align"></div>
<div class="title-content-element vertical-align">
<h6 class="title-content-element no-margin">{{experience.type}} - {{experience.title}}</h6>
<br />
<span class="italic-text title-content-element">
<span [innerHTML]="experience.dateStart.replace('/', ' / ')"></span> -
<span [innerHTML]="experience.dateEnd.replace('/', ' / ')"></span>
<div class="spacer"></div>
<span class="dot"></span>
<div class="spacer"></div>
<span [innerHTML]="this.getDuration(experience.dateStart, experience.dateEnd)"></span>
</span>
</div>
</ng-template>
<p [innerHTML]="experience.description"></p>
</mat-step>
它产生以下结果:
big screen normal display
但是在小屏幕上它会被截断:
enter image description here
我怎样才能获得回车?

最佳答案

解决这个问题的一种方法(通过猜测您当前的 CSS)是添加一些额外的 CSS 来覆盖默认的 Angular Material mat-stepper CSS。

.mat-step-label.mat-step-label {
text-overflow: inherit;
white-space: normal;
}
将足以否决默认 CSS 并且在您的标题上没有省略号(通过 text-overflow )。 See the difference in this StackBlitz有两个 Material stepper 示例:
  • 不换行到下一行
  • 换行到下一行
  • 关于html - 当屏幕太小时,Angular Material 步进器标题消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62615365/

    31 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com