ngTable中截斷文本

In this plunk我有一個ngTable與溢出的單元格，因此有兩行文本。如何截斷文本以避免兩行？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}); 

});

來源

2017-02-22 ps0604

試試這個

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

來源

2017-02-22 02:00:34

不起作用，它放大單元格的寬度，它不會截斷文本。看到這裏http://plnkr.co/edit/gg4MlBFcSDZEPxO7YbA4?p=preview – ps0604

@ ps0604現在更新我的答案嘗試 –

也許關於CSS樣式的問題。試試這個

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

來源

2017-02-22 01:36:41 Pengyy

究竟應該在哪裏我試試嗎？ – ps0604

嘗試添加樣式在td的風格 – Pengyy

也許這就是你想要的，看到這裏的文檔。 https://www.w3schools.com/cssref/playit.asp?filename=playcss_text-overflow&preval=ellipsis – Pengyy

ngTable中截斷文本

回答

相關問題