Question

我想知道如何在给定的plunkr示例中为按钮内的字符串添加省略号。按钮宽度应为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>

Answer 1

css-way是：

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

这是演示plunk

Answer 2

 <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>

还添加了加号check demo here

Answer 3

你可以用CSS

来做

db.Sensors.findAll({
    where: {
        nodeid: node.nodeid
    },
    raw : true // <----------- Magic is here
}).success(function (sensors) {
        console.log(sensors);
});

Answer 4

<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>

检查这是否有帮助。

Answer 5

试试这个

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

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

Answer 6

 <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>

您可以在plunker clickhere plunker link 1 上看到此信息，或点击此处plunker link 2

如何在按钮angularjs内的String中添加省略号

6 个答案: