如何在 angularjs 中显示多行并限制行的长度

Question

我想使用 angular js（有一点 CSS？）仅在两行中输出一些行，每行应该有一个 limit/length，如果输出变得更多多于 2 行，最后一个词应以“...”开头，并且仍然是两行。

例如， "aaaa, bbbbbbbb, cccc, dddd, eeee, ffff, gggg, hhhh, iiii"

输出应该是：

  aaaa, bbbbbbbb
  cccc, ... iiii

感谢任何建议。

Answer 1

使用指令完成 "value into multiple lines" 部分，并且
使用过滤器为太长的行插入省略号（“...”）。

从技术上讲，对于 (1)，您不需要指令，像 <div><p ng-repeat="...">... 这样的普通模板代码就可以工作，但指令最终可能会更好。

如果您尝试上述方法但仍然运行遇到问题，请使用 jsfiddle/plunkr 编辑问题（或询问另一个问题）以获得更具体的反馈。

Answer 2

你只能使用 css

<div id="test" class="verticalcut">aaaa, bbbbbbbb, cccc, dddd, eeee, ffff, gggg, hhhh, iiii</div>

这是 css 代码：

#test {
    width: 100px;
    background-color: #F00;
}


.verticalcut {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2; /* number of lines to show */
   line-height: 1;        /* fallback */
}

看看这个 jSFiddle：http://jsfiddle.net/nanndoj/oz24szf3/

Answer 3

这取决于您从哪里获得输入。如果您将输入作为字符串 - 如下所示：

  "aaaa, bbbbbbbb, cccc, dddd, eeee, ffff, gggg, hhhh, iiii"

按照以下步骤操作：

1) 在您的控制器中，创建一个范围变量并将其分配给输入数组。像这样：

angular.module('myApp',[])
  .controller('myController', [function(){
      //first convert input to an array. Be careful here. I'm assuming a space after each comma
      this.input ="aaaa, bbbbbbbb, cccc, dddd, eeee, ffff, gggg, hhhh, iiii".split(", ");
      this.limit1 = 3//limit of characters in the first line. You could have any number here! Not just 3.
      this.input2 = (this.input).slice(this.limit, this.input.length-2);//second line
      this.final = this.input[this.input.length -1]; //final word
 }]);

2)在你的视图中你可以使用ng-repeat来输出单词。像这样：

<body ng-controller="myController as ctrl">
  <span ng-repeat = "word in ctrl.input|limitTo:ctrl.limit1">{{word}}, </span><br/>
  <span ng-repeat = "word in ctrl.input2">{{word}}, </span>...{{this.final}}

</body>

Answer 4

您可以使用 angular 实现此目的，如下所示：创建一个指令，根据要显示的行和每行的高度设置元素的高度。然后你设置一个 class 溢出：隐藏并在你的 html 中设置指令中的值。

angular.module('scopePropertiesModule', [])
  .directive('zsLinesHeight', ['$timeout',
        function () {
            return {
                restrict: 'AE',
                scope: {
                    lines: '=',
                    height: '='
                },
                link: function (scope, element) {                    
                        const lineHeight = scope.lines*scope.height;
                        element.prop('parentElement').style.height = `${lineHeight}px`;
                }
            }
        }
    ]);

.show-more-less {
  overflow: hidden;
  word-break: break-word;
  line-height: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js">
</script>
<div ng-app="scopePropertiesModule">
<div class="show-more-less">
<zs-lines-height lines="3" height="15">
Ascetic chaos decrepit philosophy reason insofar oneself contradict depths ultimate snare decrepit suicide ocean. Endless intentions pinnacle mountains decieve superiority. Decieve love intentions convictions law right sea gains derive oneself intentions contradict. Spirit hatred overcome chaos free sexuality hatred ultimate marvelous salvation. Love justice intentions holiest free victorious right virtues convictions overcome. Oneself hope transvaluation good value play right will inexpedient virtues salvation endless. Battle pinnacle transvaluation christianity right gains value virtues law. Of aversion of aversion 
        </zs-lines-height>
        </div>
        </br>
        <div class="show-more-less">
        
<zs-lines-height lines="1" height="15">
 Love justice intentions holiest free victorious right virtues convictions overcome. Oneself hope transvaluation good value play right will inexpedient virtues salvation endless. Battle pinnacle transvaluation christianity right gains value virtues law. Of aversion of aversion 
        </zs-lines-height>
        </div>
</div>

然后您可以使用 css (::after) 来实现 3 点样式或任何其他样式。

如何在 angularjs 中显示多行并限制行的长度

How to display multiple lines in angularjs with limit on line length

html

javascript

css

angularjs