MaterialiseCSS卡不能保持水平对齐

时间:2017-03-12 16:03:41

标签: css angular sass materialize

我使用MaterialiseCSS并输出到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强制标题&#39;不环绕:我也尝试将字体大小更改为22px;但这是一个临时解决方案,因为在这个例子中,标题只有很长时间才能解决问题。但它们可能会更长。

Snippet of Card Display

这是一个双因素问题:卡片图片将始终为三种尺寸之一:

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个以上的标题&#39;这导致这种涓流效应。 CSS似乎没有任何影响,我不知道它是否是因为MaterialiseCSS正在初始化我的CSS并覆盖它或其他东西。

任何输入都会受到赞赏 - 我尝试了很多不同的策略(使用但没有骰子。这是我需要解决的问题,因为这些卡甚至不长 - 这个会有问题(我也有FAB链接太长的问题,但我可以效仿此结果来协助)

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:0)

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

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