CODEWITHSUNDEEP
javascriptangularjshtml
shaaa
shaaa

Reputation: 235

how to add ellipsis to a String inside button angularjs

I would like to know how to add an ellipsis to a string inside a button in the given plunkr example. The button width should be 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>

Upvotes: 0

Views: 1650

Answers (6)

D V Yogesh
D V Yogesh

Reputation: 3700

 <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 also check demo here

Upvotes: 1

D V Yogesh
D V Yogesh

Reputation: 3700

 <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;width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;" 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;width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;" type="button" class="btn btn-default" ng-click="removeSelectedSystemsButton($index)">{{name.name}}    x</button> 

    </body>
    </html>

you can see this on plunker clickhere plunker link 1 or click here plunker link 2

Upvotes: 0

Gaurav Kumar Singh
Gaurav Kumar Singh

Reputation: 1570

try this 

.text-ellipsis {
  width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
}

https://plnkr.co/edit/jbMU2bB4wxRp2GU41GIS?p=preview

Upvotes: 0

Sree Nath
Sree Nath

Reputation: 543

<button ng-repeat="name in listofSystems" style="border-radius: 25px; outline-color:#fff;text-overflow:ellipsis;overflow:hidden;width:100px;" type="button" class="btn btn-default" id="{{name.name}}" ng-click="addSystemsButton($event,$index)">{{name.name}}   +</button>

Check this if it helped.

Upvotes: 0

Anton Stepanenkov
Anton Stepanenkov

Reputation: 1036

the css-way is : 

.btn {
  text-overflow:ellipsis;
  max-width:50px;
  white-space: nowrap; 
  overflow: hidden; 
}

Here's demo plunk

Upvotes: 1

Leguest
Leguest

Reputation: 2137

You can do it with CSS

.btn-default {
  max-width: 50px;
  text-overflow: ellipsis;
  overflow: hidden;
}

Upvotes: 0

Related Questions