JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="MainCtrl">
    <div class="test" ng-style="myStyle">{{value  | splice:myStyle.width:' ...'}}</div> see here the text is not completly filling the div dffdfdfdf ddffddfkj kjdfkjdfd kjjkdkfj kjbkjfkd 
</div>

CSS

.test {
  color: #000000;
  background-repeat: no-repeat;
  background-position: right center;
  display: block;
  padding-right: 20px;
  border: 1px solid #CDCDCD;
  height: 20px;
}

JavaScript

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

.filter('splice', function () {
        return function (value, max, tail) {
        console.log(tail, max);
            if(isNaN(max))
                max = parseInt(max.slice(0,-2),10)/12;
                console.log(slice);
            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 || ' …');
        };
    });