如果文字不存在，请留空行

Question

我想让列表看起来一致。但是，每个标题的长度都不同。我想让它看起来一致 - 无论内容如何。

我正在尝试执行以下操作：

1. 将文本限制为最多两行文本（使用“...”表示文字缩短）
2. 如果文字少于两行，请将一行留空
3. 保持垂直居中

https://codepen.io/yarnball/pen/pPOQEg

我试过了，但没有成功：

.mdl-list__item-primary-content {
    line-height: 20px;
}

或

.mdl-list__item-primary-content {
    line-height: 20px;
    line-height: 40px;
}

澄清的屏幕截图：

Answer 1

我不确定你的'verticaly居中'是什么意思，因为你正在努力增加第二条线以填补空白。 但是否则你可以将它添加到容器的CSS中以解决问题1和2.

white-space: wrap;  
height: 2.1em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

Try it !