截断 ngTable 中的文本

Question

In this plunk 我有一个 ngTable 单元格溢出，结果文本分为两行。如何截断文本以避免两行？

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});

});

Answer 1

可能对 CSS 样式有疑问。试试这个

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

Answer 2

试试这个

<!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="bootstrap-css@3.3.6" />
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
    <script src="https://unpkg.com/ng-table@2.0.2/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>

截断 ngTable 中的文本

Truncate text in ngTable

angularjs

ngtable