角度材质扩展面板描述内的文本溢出省略号动态宽度答案

【问题标题】：Text overflow ellipsis dynamic width inside an angular material extension panel description角度材质扩展面板描述内的文本溢出省略号动态宽度
【发布时间】：2018-01-25 09:35:37
【问题描述】：

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

这是一个堆栈闪电战：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 angular-material2

【解决方案1】：

我无法为您编写代码 sn-p，因为在您给我们的链接上，css 属性比您在此处给我们的要多，但问题是您的 mat-panel-description上面有display: flex;。

用 display: block; 覆盖它。

下面给你评论：

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

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

只需将其添加到您的 style.css

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

我给了你如何实现它，而你没有尝试......与评论我的答案相比，你尝试花费的时间会更少。

【讨论】：

我已经更新了链接。我认为删除 flex 会破坏标题-描述关系。
很抱歉，我确实尝试过，但我是在我们自己的代码中做到的，在我们自己的代码中，我们在标题内有一个包装 div（带有 flex），包装标题和描述。所以在面板描述上设置 display:block 对我们没有帮助，直到我们删除了包装器。非常感谢！
在 mat-checkbox 上寻找相同问题的解决方案，但没有骰子；主控件已经是block，问题是由于它在内部使用flex 作为标签引起的。但是标签不是任何可以被覆盖的子元素，所以没有修复...

【解决方案2】：

这并不是真正的 Angular 问题，而是 CSS 问题。

让我向你解释一下文本溢出是如何工作的：

首先，您需要声明一个容器。此容器将具有 max-width 或 max-height 属性，并且不允许显示溢出。

接下来，您将拥有文本容器。这个容器会说文本在溢出时应该显示一个省略号。但也需要说明文本只能在一行，否则溢出的文本会换行。

Here is the stackblitz 显示我正在解释的内容。

【讨论】：