0

我有一个帖子列表。

我想打印一些带有帖子标题的帖子内容

就像 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

它工作正常..

但...

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

该页面将不足以容纳大标题，因此它将有一个新的like

像这样

//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！

我想做这个技巧来保存我设计的butey

如果你不理解我

请看这张照片

在此处输入图像描述

4

2 回答 2

2

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

首先，将标题的高度限制为与您的相同line-height并指定overflow: hidden;它们。然后可以选择用 . 替换您不想截断的空格&nbsp;。这样，当容器调整大小时，标题将换行到另一行不显示。

请参阅this fiddle进行演示。

于 2012-06-29T08:06:15.230 回答
1

看看jQuery ThreeDots 插件。

当它太长时，这会将省略号放在文本行的末尾。

省略号 =...

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

这是插件的演示页面，其中包含许多实时示例！

于 2012-06-29T08:16:24.877 回答