Усекать текст в 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

ответ

Смежные вопросы