css - 标题跨两行然后省略，而不是一行

Question

我希望我的视频缩略图上的标题文本跨 2 行，如果超过该点太长则使用省略号。就像 Youtube 一样:

TEENAGE MUTANT NINJA 
TURTLES - Official Traile…

就像那样。

目前，矿山是这样的:

TEENAGE MUTANT NINJA TUR…

我现在的类(class)是:

#sidebar .menu .link .title {
  margin-left: 15px;
  cursor: pointer;
  display: block;
  font-size: 12px;
  line-height: 34px;
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

HTML 是这样的:

<p class="title"><a title="Title of video is really long, heaps cool" href="#">Title of video is really long, heaps cool</a></p>

我试过使用 Firebug 复制 Youtube 的内容，但我不知道如何让它工作。

谢谢!

Answer 1

这是 codepen link

CSS-Tricks 提供了各种不同的酷方法的示例来实现您想要的并很好地解释了它。
您可以在这里查看它们 --> http://css-tricks.com/line-clampin/