在我的情况下，如何正确显示/隐藏按钮？

Question

我正在尝试为我的应用构建一个“显示更多”按钮，但遇到了问题。

当用户单击“阅读更多”按钮时，我有一条指令可以执行操作

(function(window, angular) {
    var app = angular.module('myApp');
    app.directive('readMore', [
        function() {
            return {
                restrict: 'A',
                template:'<a class="read-more-button"></a>',
                link: function(scope, element) {                        
                    element.bind('click', function(){
                        // do stuff
                    })  
                }
            };
        }
    ]);
})(window, angular);

HTML

<div id="container">
    <div ng-repeat="item in items">
        {{item.description}}
    </div>
</div>
<a ng-show="items.length > 10" read-more href="#"></a>
//only show read more button when I have more than 10 items

CSS：

#container {
    height: 250px;
    overflow: hidden;
}

问题是，有时一个item.description具有长文本和我#container DIV只能容纳8个项目和休息是隐藏的。 我不想计算字母，因为我认为这不切实际。 有没有什么办法解决这一问题？ 谢谢您的帮助！

更新：

理想的结果将是：单击“更多”按钮时，div大小将扩展到应有的大小。 当前，仅当应用程序中有> 10个项目时，才会显示“更多”按钮。 我的问题是，当8个项目的文本已经填满250px div但我实际上有9个项目时，如何正确显示/隐藏更多的阅读按钮（所以它应该显示更多的按钮，但由于它只有9个项目，因此不会显示更多的按钮）

最重要的是：#container div中填充文本时，无论我有多少个物品，我都需要知道何时显示更多按钮

Answer 1

让我正确回答您的问题，您希望能够检测到固定宽度div的内容是否填充或溢出了div（与内容的数量无关，因为它们可能具有不同的大小），如果显示，则显示更多按钮？

如果是这样，请使用示例javascript代码段检查此线程，是否存在相同的问题，您可以将其适配到上面的angular指令中：

javascript CSS检查是否溢出

Answer 2

我认为我们需要讨论您的CSS

#container {
height: 250px;
overflow: hidden;}

这意味着您要将高度固定为250px，如果#container中的内容高度超过250px，则它将隐藏多余的部分。

因此，有时单个item.description包含长文本，您只会看到8或7或6个项目，这是正确的。

也许有两种方法可以做：

1. 如果要将高度固定为250px。 您可以更改溢出：隐藏 ; 溢出：滚动 ;。 您将看到所有10个项目，但div具有滚动。

2. 如果您不想将高度固定为250px。 您可以更改为

   '#container {height：auto; 溢出：可见；}

希望能帮助到你。