角度材料扩展面板描述内的文本溢出省略号动态宽度 [英] Text overflow ellipsis dynamic width inside an angular material extension panel description

问题描述

我想在 mat-panel-description 中显示一个描述，当溢出时会显示省略号点.我希望能够调整窗口大小，窗口越大，我想看到的文本越多，而窗口越小，我想看到的越少.

I want to display a description in a mat-panel-description that when overflowed shows the ellipsis-dots. I would like to be able to resize the window and the bigger the window the more I want to see of the text and the smaller the window the less I want to see.

这是一个堆栈闪电战:https://stackblitz.com/edit/angular-guszs6

HTML:

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
      <mat-panel-description>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
      </mat-panel-description>
    </mat-expansion-panel-header>

    <mat-form-field>
      <input matInput placeholder="First name">
    </mat-form-field>

    <mat-form-field>
      <input matInput placeholder="Age">
    </mat-form-field>
  </mat-expansion-panel>
</mat-accordion>

CSS:

mat-panel-description{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  width: 100%;
}
mat-panel-title{
  white-space:nowrap;
}

推荐答案

我不能为你做一个代码片段，因为在你给我们的链接上有比你在这里给我们更多的 css 属性，但问题是您的 mat-panel-description 上有 display: flex; .

I can't do a code snippet for you, because on the link you gave us there is more css properties than you gave us here, but the problem is that your mat-panel-description has display: flex; on it.

用 display: block; 覆盖它.

Override it with display: block;.

给你下面的评论:

不，一切都好，我的叉子:

No, everything is okay, my fork of yours :

https://stackblitz.com/edit/angular-guszs6-dxcudt?file=styles.css

只需将其添加到 style.css 中

Just add this on your style.css

mat-panel-description {
   display: block !important;
}

我告诉了你如何实现它，而你还没有尝试......尝试比评论我的答案花费的时间更少.

I gave you how to achieve it, and you hadn't try ... It would have took you less time to try than to comment my answer.

这篇关于角度材料扩展面板描述内的文本溢出省略号动态宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！