html - 尽管内容只有一行，但如何将标题固定为两行

Question

如何在文本只有一行的情况下将链接标题固定为两行？

CodePen Link to Problem

当标题只有一行时，评论和点赞按钮的位置变得不一致，如图HERE .

我尝试使用 float 但无济于事。然后我尝试设置 div.info 相对的位置，并将我的评论和点赞按钮设为绝对，这样我就可以将它们从文档流中删除，但不知何故，评论和点赞按钮仍然存在遵循文档流程。

.info
    height: 20em
    position: relative

.comment
    position: absolute
    margin-top: -1.5em
    font-size: 1.2em
    float: left
    padding-left: 3em
    a
        text-decoration: none
        color: white
        &:visited
            color: white
            font-weight: 700
.like
    margin-top: -1.5em
    font-size: 1.2em
    position: absolute
    top: 0
    bottom: 20px
    right: 20px
    // float: right
    padding-right: 3em

Answer 1

您将按钮视为每个部分的页脚。 将两个按钮(评论和喜欢)放在同一个 div 中，并添加它:

position: absolute;
bottom: 0;

到 div 的类。

我的屏幕似乎比你的大:每个标题都在一行中，所以按钮总是亮着的。 更多，请注意:当我向下滚动页面时，滑动速度太快，所以我无法阅读您的最后一项。