Question

我需要的是一个Angular或CSS解决方案，如果文本长度超过5行，它将添加“read more”按钮。

我有一个显示文字的Angular页面，其字母数限制为150个字符。

{{post.post_text | limitTo：letterLimit}}

但在某些情况下，这些帖子太长了，因为它们写了许多换行符，即：

我的帖子
第2行
第3行
升
I
名词
ë

...仍然少于150个字符，但它开始打破我的页面。

所以我需要一个Angular或CSS解决方案，如果文本长度超过5行，它将添加“read more”按钮。

原谅我，但这是我第一次尝试Angular，我不知道从哪里开始！任何帮助将非常感激。

到目前为止

我只找到了与人物数量相关的答案和教程。我真的需要一个基于行数或总行高的解决方案。谢谢。

Answer 1

您可以尝试这样的过滤器：

{{post.post_text | limitTo:letterLimit | maxLines: linesLimit}} // toggle lines limit with the show more

app.filter('maxLines', function() {
    return function(txt,  limit) {

        var parts = txt.split("\n");

        if(limit == 0) return parts.join('<br/>');
        return parts.slice(0,limit).join('<br/>');
    }
})

在视图中：

<button class="show-more" ng-if="checkLines(checkLines(resource.description)"></button>

在控制器中：

$scope.lines_limit_default = 3;// ex.

function checkLines(txt) {
  if(txt && txt != null) {   
    return (txt.split("\n").length > $scope.lines_limit_default) ? true : false;
  } else return false;
};

Angular根据行数而不是字母数量读取更多按钮

1 个答案: