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

Question

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

我的代码如下

JSFiddle

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

我已经尝试用不同的方法来解决您的问题。看看是否有帮助:

不是将 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  

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

现在取最小字体大小 8 并将其除以 8。因此现在限制将基于元素的宽度。

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

DEMO

Updated Answer

我一直在寻找不同的解决方案。正如您在评论中提到的，字体大小可能会有所不同。我想在这种情况下，我们最好采用简单的基于 CSS 的方法，使用 text-overflow。

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

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

DEMO