Question

我有一个div将具有动态宽度，基于我必须限制该div内容的宽度，我创建了一个过滤器，它将剪切文本并附加＆＃34; ...＆＃ 34;到字符串的末尾，但问题是我们如何根据动态宽度大小分配限制

我的代码如下所示

HTML

<div ng-app="app" ng-controller="MainCtrl">
    <div class="test" ng-style="myStyle">{{value  | splice:12:' ...'}}</div>
</div>

脚本

angular.module('app', [])
    .controller('MainCtrl', function ($scope) {
        $scope.myStyle={};
        $scope.myStyle.width = "150px";
        $scope.value= "My value is anythinggggggggggggggggg";
})

.filter('splice', function () {
        return function (value, max, tail) {
            if (!value) return '';
            max = parseInt(max, 10);
            if (!max) return value;
            if (value.length <= max) return value;
            value = value.substr(0, max);
            return value + (tail || ' …');
        };
});

Answer 1

我尝试过针对您的问题使用不同的appraoch。看看它是否有帮助：

不是将limit传递给过滤器，而是传递元素的width。

<div class="test" ng-style="myStyle">{{value  | splice:myStyle.width:' ...'}}</div>

现在在您的过滤器中：

       function (value, max, tail) {
            if(isNaN(max))
                max = parseInt(max.slice(0,-2),10)/12;
            if (!value) return '';
            max = parseInt(max, 10);
            // rest of your code

检查它是否是一个字符串。如果是一个字符串，假设您以width的格式传递150px。所以从字符串中切片px。我们现在150。

现在将字体大小设置为8并将其除以8.所以现在限制将基于元素的宽度。

您可以通过传递宽度以及直接传递限制来重用相同的filter。它现在适合两种情况。

DEMO

更新的答案

我一直在寻找不同的解决方案。正如您在评论中提到的那样，字体大小可能会有所不同。在这种情况下，我想使用text-overflow。

可以更好地使用基于CSS的简单方法

.test {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

现在无论字体大小如何，文本都将被剪裁。现在，无论您希望使用此功能，都可以添加特定的css类clip-text。

<强> DEMO

基于div宽度的动态文本长度限制

1 个答案: