Question

我希望我的视频缩略图上的标题文字跨越2行，如果超过该点则过长。完全像Youtube一样：

TEENAGE MUTANT NINJA 
TURTLES - Official Traile…

就像那样。

此刻，这样的地雷：

TEENAGE MUTANT NINJA TUR…

我目前的课程是：

#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提供了大量不同酷炫方法的例子来实现你想要的并且解释得很好。你可以在这里查看 - ＆gt; http://css-tricks.com/line-clampin/

标题跨越两行然后是省略号，而不是一行

1 个答案: