Question

我在我的facebook页面上构建了一个自定义的facebook侧边栏，它在UL内部显示LI标签中的消息。

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

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

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

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

.facebooklist { 高度：800像素; 溢出：隐藏 } 但是，这会切断最后一条消息。

我想显示包含我的页面消息的li项目，直到该框的高度达到800px或更高。

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

供参考，请在此处查看我的页面： Image

侧边栏位于右侧。

代码：

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

提前致谢！

Answer 1

考虑放overflow: auto;并免除痛苦。

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

Answer 2

完全依赖于PHP的解决方案可能会失败，因为您无法真正了解内容在屏幕分辨率和10'000可能的浏览器配置下的持续时间。

因此我会选择JS。

方法一：只要<li>的高度不超过主要内容的高度，就将数据保存在数组中并附加<ul>。
方法二：正常使用php打印你的<li>，并使用JS删除最后一个<li> - 元素，只要<ul>大于内容。

继续将<li>添加到<ul>直到达到高度</ul> </li>

2 个答案: