当网页缩小时，如何隐藏部分帖子标题？

Question

我有一个帖子列表。

我想用帖子标题打印一些帖子内容的单词

就像GMAIL（旧设计）

$TopicTitle='social networks';
$SmallDescription='The ability to easily bookmark or share content on popular social media platforms';
echo '<p class="title">'.$TopicTitle.'</p>'.' - <span class="desc">'.$SmallDescription.'</span>';
//this will prints
//social networks - The ability to easily bookmark or share content on popular social media platforms

它运作良好..

但是...

如果用户有小型显示器或已将页面调整为小型

这个页面对于大标题来说是不够的，所以它会有一个像

这样的新标题 像这样

//social networks - The ability to easily bookmark or share content 
//on popular social media platforms

会有新的一行！

所以，我想要像Gmail那样做点什么？

当你缩小页面时，标题也在缩小，我不是指标题的大小，我的意思是标题本身就会变成这样的

//social networks - The ability to easily bookmark or share content 

部分标题已被删除，我不知道他们是如何做到的，java或html！

我想做这个伎俩来拯救我设计的傻瓜

如果你不理解我

请看这张照片

Answer 1

我不知道谷歌这样做的确切方式，但有很多可能的解决方案。这是我想到的一个：

首先，将标题的高度限制为与line-height相同，并为其指定overflow: hidden;。然后，选择使用 替换您不想切断的空格。这样，当容器调整大小时，标题将被包装到另一个未显示的行。

请参阅this fiddle进行演示。

Answer 2

查看jQuery ThreeDots Plugin。

这个地方省略号在文字行的末尾太久了。

省略号= ...

示例： This virtual long text-line is really long with many charact...

这是插件的Demo Page，其中包含许多实例！