离子卡中的较大文本重叠

Question

我正试图将一些文字覆盖在图像顶部的Ionic卡片中：

Codepen：http://codepen.io/ohho/pen/oXpmQQ

字体很小时没关系：

.cardImage .cardMotto p { 
  font-size:16px; 
}

当字体很大时，文字会混乱：

.cardImage .cardMotto p { 
  font-size:36px; 
}

如何修复CSS以正确显示大字体？

Answer 1

您必须添加行高才能匹配font-size。

.cardImage .cardMotto p {
  font-size: 36px;
  line-height: 36px;
}

Codepen

Answer 2

嘿我宁愿你应该使用em而不是px你可以给1.5em或1.4em线高