ngTableのテキストを切り捨てます

In this plunk私にはngTableのセルがオーバーフローしているため、2行にテキストがあります。どのように2つの行を避けるためにテキストを切り捨てる？ CSSスタイルについて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私の答えを今すぐ更新しよう –

多分質問。試みるこの

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のテキストを切り捨てます

答えて

関連する問題