角材料扩展面板内部的文本溢出省略号动态宽度 [英] Text overflow ellipsis dynamic width inside an angular material extension 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

Here is a stackblitz: 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屋！