javascript - how to add ellipsis to a String inside button angularjs -


i know how add ellipsis string inside button in given plunkr example. button width should 50px.

https://plnkr.co/edit/7puz8a52fqs3ix9n4zx0?p=preview

html:

<html>    <head>      <script src="angular.min.js"></script>            <script src="script.js"></script>      <link rel="stylesheet" href="tree.css"/>      <link rel="stylesheet" href="font-awesome.min.css"/>      <link rel="stylesheet" href="bootstrap.min.css" />    </head>    <body data-ng-app="testapp" data-ng-controller="button">            <hr>      <button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">savefilter</button>      <button type="button" class="btn btn-default" data-dismiss="modal" data-ng-click="delete()">delete</button>            <button ng-repeat="name in listofsystems" style="border-radius: 25px; outline-color:#fff;" type="button" class="btn btn-default" id="{{name.name}}" ng-click="addsystemsbutton($event,$index)">{{name.name}}   +</button>            <hr>      <p><strong>selected systems</strong></p>      <button ng-repeat="name in listofsystemsadded" style="border-radius: 25px; outline-color:#fff;" type="button" class="btn btn-default" ng-click="removeselectedsystemsbutton($index)">{{name.name}}    x</button>           </body>  </html>

 <html>     <head>     <script src="angular.min.js"></script>      <script src="script.js"></script>     <link rel="stylesheet" href="tree.css"/>     <link rel="stylesheet" href="font-awesome.min.css"/>     <link rel="stylesheet" href="bootstrap.min.css" />     </head>     <body data-ng-app="testapp" data-ng-controller="button">      <hr>     <button type="button" class="btn btn-success" data-dismiss="modal" data-ng-click="save()">savefilter</button>     <button class="chipbtn" type="button" class="btn btn-default" data-dismiss="modal" data-ng-click="delete()">delete</button>      <button ng-repeat="name in listofsystems" style="border-radius: 25px; outline-color:#fff;" type="button" class="btn btn-default" id="{{name.name}}" ng-click="addsystemsbutton($event,$index)"><span style="width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;">{{name.name}} </span>    <span style="color:red;vertical-align: top;">+</span></button>      <hr>     <p><strong>selected systems</strong></p>     <button ng-repeat="name in listofsystemsadded" style="border-radius: 25px; outline-color:#fff;" type="button" class="btn btn-default" ng-click="removeselectedsystemsbutton($index)"> <span style="width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;">{{name.name}} </span>  <span style="color:red;vertical-align: top;">+</span></button>       </body>     </html> 

added plus symbol check demo here


Comments

Popular posts from this blog

php - Permission denied. Laravel linux server -

google bigquery - Delta between query execution time and Java query call to finish -

python - Pandas two dataframes multiplication? -