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

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

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

(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);

问题有时是单个项目。description有很长的文本，我的container div只能容纳8个项目，其余的都隐藏了。我不想数数字母，因为我觉得那不实际。有没有办法解决这个问题？谢谢你的帮助

更新：

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

---

底线是：当容器div充满文本时，我需要知道何时显示read more（阅读更多）按钮，无论我有多少个项目

让我正确回答您的问题，您希望能够检测固定宽度div的内容是否填充或溢出div，而不管内容的数量，因为它们可能有不同的大小，如果是这样，是否显示“阅读更多”按钮

如果是这样，请检查此线程，它也有相同的问题，使用一个示例javascript片段来执行检查，您可以将其调整到上面的angular指令中：

---

我想我们需要讨论一下你的CSS

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

这意味着您希望将高度固定为250px，如果容器中的conntent的高度大于250px，则它将隐藏冗余部分

所以有时候一个项目的描述有很长的文字，你只能看到8个或7个或6个项目，这是正确的

可能有两种方法：

如果要将高度固定为250px。 您可以更改溢出：隐藏；要溢出：滚动；。您将看到所有10项，但div有滚动条。 如果您不想将高度固定为250px。 你可以换成

'容器{高度：自动； 溢出：可见；}

---

希望有帮助。

我不清楚你的问题是什么。首先，阅读更多能做什么？它是扩展container div还是加载更多的项目？第二，您的问题是如何显示8个项目，而不考虑item.description文本大小吗？那么，假设您可以计算内容相对于容器大小的大小，您的问题是如何做到这一点？或者问题是，如何确定是否发生了溢出？在我看来，后者过于宽泛，角度也不太分明-related@NewDev我需要知道，当容器div中充满文本时，无论我有多少项，何时显示“阅读更多”按钮。这看起来像是您在为可以而且应该使用ngClick指令轻松处理的内容制定指令。

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

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