Question

我想使用角度js（带有一点CSS？）仅在两条多行中输出一些行，并且每行应该有一个限制/长度，并且如果输出变得超过2行，则最后一个单词应该之前是“......”，仍然是两行。

例如， “aaaa，bbbbbbbb，cccc，dddd，eeee，ffff，gggg，hhhh，iiii”

输出应为：

  aaaa, bbbbbbbb
  cccc, ... iiii

任何建议表示赞赏。

Answer 1

你只能通过使用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 2

使用指令将＆＃34;值转换为多行＆＃34;部分和
使用过滤器为省略的行插入省略号（＆＃34; ...＆＃34;）。

从技术上讲，（1）你不需要指令，只需像<div><p ng-repeat="...">...这样的普通模板代码就可以了，但是指令可能会更好。

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

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来实现此目的，如下所示：创建一个指令，该指令根据要显示的行和每行的高度来设置元素的高度。然后，设置一个带有溢出的类：隐藏并在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）实现3dots样式或其他任何样式。

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

4 个答案: