ограничение длины текстовой длины на основе ширины 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

Я попытался с другим 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 

Am проверки, если это строка. В случае его строки, если вы проходите width в формате 150px. Так нарезать px из строки. у нас есть 150 сейчас.

Теперь возьмите минимальный размер шрифта 8 и разделите его на 8. Итак, теперь предел будет основан на ширине элемента.

Вы можете использовать тот же самый filter, передавая ширину, а также передавая лимит непосредственно. Теперь это подойдет для обоих сценариев.

DEMO

Обновлено Ответ

Я смотрел различные решения. Как вы уже упоминали в комментариях, размер шрифта может отличаться. Я предполагаю, что в этом случае мы будем использовать простой подход на основе CSS, используя text-overflow.

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

Теперь, независимо от размера шрифта, текст всегда будет обрезаться. Теперь, в зависимости от того, какие элементы вы хотите использовать, добавьте конкретный класс css clip-text.

DEMO