MaterializeCSS 卡片没有保持水平对齐答案

【问题标题】：MaterializeCSS Cards not staying aligned horizontallyMaterializeCSS 卡片没有保持水平对齐
【发布时间】：2018-12-03 14:53:55
【问题描述】：

我正在使用 MaterializeCSS 并将其输出到带有 FAB 链接的卡片行中。

<div class="row">
  <div class="col s6 m4 l3" *ngFor="let card of cards">
    <div class="card sticky-action">
      <div class="card">
        <div class="card-image waves-effect waves-block waves-light">
          <img class="activator responsive-img" src="{{card.image_url}}">
        </div>
        <div class="card-content card-wrap-around-name">
          <div class="card-title activator grey-text text-darken-4 text-hide-me">
            {{card.name}}
          </div>
          <i class="material-icons right">more_vert</i>
          <p><a href="#">TBD</a></p>
        </div>
        <div class="card-action">
          <a [routerLink]=''>Add to Decks</a>
          <a [routerLink]=''>Add to Collections</a>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4">
            {{card.name}}<i class="material-icons right">close</i>
          </span>
          <p>{{card.text}}</p>
        </div>
        </div>
      </div>
    </div>
  </div>
</div>

是 HTML - card-title 最初是一个，但在四处寻找之后，我将它移到了一个 DIV，看看这是否可能是我的 CSS 无法正常工作的原因。

SASS

.text-hide-me 
  overflow: hidden
  white-space: nowrap
  -o-text-overflow: ellipsis
  -ms-text-overflow: ellipsis
  text-overflow: ellipsis

我尝试使用此 CSS 来强制“标题”不环绕：我还尝试将字体大小更改为 22px；但这是一个临时修复，因为在此示例中，标题只有“这么长”，但它们可以更长。

这是一个两个因素的问题：卡片图像将始终是以下三种尺寸之一：

A) No Card Image so it uses my saved one
B) Older cards which are much smaller(Maybe 50-60px)
C) The average card which looks fine, until it's next to A or B

我估计 ~420px 将对齐图像，但它们仍然有点偏离 - 像这样真正影响输出的问题是一些卡片有 2+ 行“标题”，这会导致这种涓涓效应。 CSS似乎没有任何影响，我不知道是不是因为MaterializeCSS在我的CSS之后初始化并覆盖它或其他什么。

任何意见都将不胜感激 - 我尝试了许多不同的策略（使用但不使用骰子。这是我需要解决的问题，因为这些卡片甚至都不长 - 这个会有问题（我我也有 FAB 链接太长的问题，但我可以模仿这个结果来提供帮助）

【问题讨论】：

标签： css angular sass materialize

【解决方案1】：

我认为最好的解决方案是在标题达到卡片宽度时添加点（...）：

.text-hide-me {
    display:inline-block;
    width:100%;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

它适用于不同的字体大小和卡片宽度。

工作示例：https://codepen.io/xristoeftimov/pen/XMgdjO

【讨论】：

果然行得通——我猜是overflow: hidden !important;——我从来没有试过把重要的东西放在那里。 SASS 每次在 width:100% 上都有一个解析错误，但删除它，它仍然按预期运行。谢谢！

【解决方案2】：

您可以简单地从https://materializecss.com 添加一个帮助类。要截断省略号中的长文本行，请将类 truncate 添加到包含文本的标签中。

<h4 class="truncate">This is an extremely long title that will be truncated</h4>

【讨论】：