JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<div ng-controller="EllipsisController">
    <input type="checkbox" ng-model="settings.window.ellipsis" />
    <div class="div custom" my-ellipsis="settings.window.ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum lacinia enim, vel vestibulum sapien aliquet at. Pellentesque mollis lorem mi, quis condimentum eros ornare sit amet. Nam porttitor blandit urna, in consequat mauris varius at. Aliquam id fermentum massa. Duis non metus nec nunc consequat fringilla id eu elit. Curabitur dapibus ut odio nec accumsan. Nulla eleifend risus ligula, id gravida purus porttitor porta. Duis eu nibh ut ipsum euismod ultrices non ac quam. Cras imperdiet nisl ut faucibus egestas. Sed aliquam condimentum mattis.</div>
</div>

CSS

.div {
    width:250px;
    border:dashed 1px #000;
    margin: 0 50px;
    height: 50px;
    background-color: white;
}
body {
    background-color:#ccc;
}

JavaScript

var myApp = angular.module('myApp', []);

function EllipsisController($scope) {
    $scope.settings = {
        "window": {
            "ellipsis": false
        }
    };
}

myApp.directive('custom', function () {
    return {
        restrict: 'AC',
        link: function (scope, element, attrs) {
            scope.$watch(attrs.myEllipsis, function (value) {
                element.css('text-overflow', (value ? 'ellipsis' : ''));
                element.css('overflow', (value ? 'hidden' : 'visible'));
                element.css('white-space', (value ? 'nowrap' : 'normal'));
            });
        }
    }
});