0

我已经为我的 facebook 页面构建了一个自定义的 facebook 侧边栏，它在 UL 内以 LI 标记显示消息。

我不希望这个 UL 框变得比页面的其他内容长，所以我让它显示前 5 条消息。

最近，我开始发布更长的消息，因此 5 条消息变得比其他内容更长。现在可以减少 5 条消息，比如说：3 条消息。

然而，这需要每周手动调整，这不是最佳的。

现在我让我的 ul 具有以下 css 属性：

.facebooklist{ 高度：800px; overflow:hidden } 然而，这会切断最后一条消息。

我想显示尽可能多的包含我的页面消息的 li 项目，直到框达到 800 像素或更高的高度。

这可能吗？如果是这样，怎么办？

作为参考，请在此处查看我的页面： 图片

侧边栏位于右侧。

编码：

<div class = "fbheader"><img class = "flogo" src = "img/f_logo.png"/><a class = "ftext" href="https://www.facebook.com/WIEWIE4life">WIEWIE</a><iframe class ="fiframe" src="//www.facebook.com/plugins/like?href=http%3A%2F%2Fwww.facebook.com%2FWIEWIE4life&amp;send=false&amp;layout=standard&amp;width=10&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=35&amp;appId=520187094675923&amp;locale=en_US" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:25px; float:right;" allowTransparency="true"></iframe></div>
                            <ul class = "facebooklist">
                                <?php
                                    $page = file_get_contents('https://graph.facebook.com/WIEWIE4life/feed?access_token=520187094675923|OcGraoxcC7OH7gurPtx9Rqb8KnA');
                                    $data = json_decode($page);
                                    $x = 0;
                                    foreach ($data->data as $news ) {
                                        $StatusID = explode("_", $news->id);
                                        if (!empty($news->message) && !($temp > 5)){
                                            $temp = $temp + 1;
                                ?>
                                            <li class = "bericht">
                                                <?php
                                                    $x = new DateTime($news->updated_time);
                                                    $x->setTimezone(new DateTimeZone('Europe/Amsterdam'));
                                                    $time = $x->format(DATE_ATOM);
                                                    $x = explode("T",$time);
                                                    $x[1] = substr($x[1],0,-9);
                                                    echo "<h6 class = 'date'>". $news->from->name . " - " . $x[0]. " ".$x[1]."</h6>";
                                                ?>
                                <?php
                                                echo "<p class = 'message'>" . $news->message . "</p>";
                                            ?>              
                                            </li>
                                <?php
                                        }
                                    }
                                ?>
                            </ul>
                        </div>

提前致谢！

4

2 回答 2

1

考虑让overflow: auto;自己免受痛苦。

您无法在显示之前测量 HTML 中的文本。正如@Zim84 所说，JS 是您唯一的解决方案，但它只是视觉上的东西。HTML 仍会在您的页面中，只是您将从 DOM 树中删除它。

于 2013-06-18T10:17:34.207 回答
0

完全依赖 PHP 的解决方案可能会失败，因为您无法真正知道内容在哪种屏幕分辨率上以及在这 10'000 种可能的浏览器配置下会持续多久。

因此，我会选择 JS。

  • 方法一：将您的数据保存在一个数组中并附加这些数据<li>，只要其高度<ul>不超过您的主要内容的高度。
  • 方法二：像你已经做的那样用php正常打印你，并用JS<li>删除最后一个<li>元素，只要它<ul>比内容大。
于 2013-06-18T10:15:35.350 回答