CODEWITHSUNDEEP
angularjsngtable
ps0604
ps0604

Reputation: 1071

Truncate text in ngTable

In this plunk I have an ngTable with cells that are overflown and as a result there is text in two lines. How to truncate the text to avoid the two lines?

HTML

<div ng-controller="myCtl" ng-app="app">
    <table ng-table="tableParams" class="table table-bordered table-hover">
        <tbody>
            <tr ng-repeat="u in data">
                <td title="'User ID'" style="width:150px">{{ u.uid }}</td>
                <td title="'Name'" style="width:150px">{{ u.nm }}</td>
                <td title="'Group'" style="width:200px">{{ u.ugr }}</td>
            </tr>
        </tbody>
    </table>
</div>

Javascript

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

app.controller('myCtl', function($scope,NgTableParams) {

          $scope.data = [ 
            { uid: 'User 1', nm: 'Name 11111111111111111111x', ugr: 'Group 1'},
            { uid: 'User 2', nm: 'Name 222222222222222222x', ugr: 'Group 2'}
          ];

          $scope.tableParams = new NgTableParams({dataset: $scope.data});

});

Upvotes: 0

Views: 1023

Answers (2)

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

Try this

<!DOCTYPE html>
<html>

<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="[email protected]" />
    <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/bundles/ng-table.min.css">
    <script src="https://unpkg.com/[email protected]/bundles/ng-table.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('app', ['ngTable']);

        app.controller('myCtl', function($scope,NgTableParams) {
          
          $scope.data = [ 
          { uid: 'User 1', nm: 'Name 11111111111111111111x', ugr: 'Group 1'},
          { uid: 'User 2', nm: 'Name 222222222222222222x', ugr: 'Group 2'}
          ];
          
          $scope.tableParams = new NgTableParams({dataset: $scope.data});
          
      });
  </script>
  <style type="text/css">
    /* Styles go here */

    td p {
      text-overflow: ellipsis !important;
      overflow: hidden; 
      white-space: nowrap;
      width:30px;
  }
</style>
</head>

<body>
    <div ng-controller="myCtl" ng-app="app">
        <table ng-table="tableParams" class="table table-bordered table-hover">
            <tbody>
                <tr ng-repeat="u in data">
                    <td title="'User ID'" style="width:150px">{{ u.uid }}</td>
                    <td title="'Name'" ><p> {{ u.nm }}</p></td>
                    <td title="'Group'" style="width:200px">{{ u.ugr }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

Upvotes: 1

Pengyy
Pengyy

Reputation: 38171

maybe question about CSS styles. try this 

white-space:nowrap;   // disable auto wrap
overflow:hidden;      // text overflowed will be hidden
text-overflow:ellipsis; // text 0verflowed will be replaced with ...

Upvotes: 0

Related Questions