Question

我想显示更多文字只有当p标签高度超过40px并且如果文字展开时点击show more，它应该更改为显示更少。那么，如果文字大小超过40像素，如何检查公寓呢？请帮助。

 <p class="expandable"  ng-class={expanded:show}>long text-------</p>
    <a ng-if="!show"  ng-click="show=true">show more</a>
    <a ng-if="show"  ng-click="show=false">show less</a>

CSS:

.expandable {
 line-height:40px;
Overflow:hidden;
}

.expanded{
line-height:auto;
}

Answer 1

您好参考此https://plnkr.co/edit/gfQmrD1mRvF81QXp7C8C?p=preview

<强> HTML

<p class="expandable hideContent"  ng-class=showclass>  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
       ghjgjgjkghkk jkhkj
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.-</p>
   <div class="show-more">
        <a href="#" ng-click="showmore()">{{showtest}}</a>
    </div>

<强> JS

  $scope.showtest = 'ShowLess';
  $scope.showmore = function(_logout) {
    if($scope.showtest == 'ShowMore')
    {
       $scope.showtest = 'ShowLess';
       $scope.showclass = 'hideContent';
    }
    else
    {
      $scope.showtest = 'ShowMore';
      $scope.showclass = 'showContent';
    }

  }

使用Line-height i实现类

<强> CSS

/* Put your css in here */

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 2em;
}

.showContent {
    line-height: 1em;
    height: auto;
}
.showContent{
    height: auto;
}

如果文本大小超过angularjs中的指定像素，如何显示更多并显示更少的链接？

1 个答案: