我正在使用 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
最初是 a 但在四处寻找之后,我将其移至 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 链接太长的问题,但我可以模仿这个结果来提供帮助)
最佳答案
我认为最好的解决方案是在达到卡片宽度时在标题中添加点 (...):
.text-hide-me {
display:inline-block;
width:100%;
white-space: nowrap;
overflow:hidden !important;
text-overflow: ellipsis;
}
它适用于不同的字体大小和卡片宽度。
关于css - MaterializeCSS 卡没有保持水平对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42749684/