Question

我正在尝试使用angularjs ui-grid

创建网格

某些列的宽度较小，想要删除椭圆和尝试使用css选项，但文本溢出到下一列。

以下是我试过的内容

＆＃13;

   var app = angular.module('app', ['ngAnimate','ngTouch', 'ui.grid','ui.grid.resizeColumns', 'ui.grid.moveColumns', 'ui.grid.edit']);

      
    app.controller('MainCtrl', ['$scope', function ($scope) {
	$scope.gridOptions = { 
	  data: 'myData', 
	  enableFiltering: true,
      enableRowSelection: false,
      headerRowHeight: '20%',
	  headerCellClass: 'blue'
	  
	
	};		

      $scope.myData = [
        {
            "firstName": "Cox",
            "lastName": "Carney",
            "company": "Enormo",
            "employed": "1234",
			"address": "1234",
			"address1": "1234",
			"address2": "1234",
			"address3": "1234",
			"address4": "1234",
			"address5": "1234",
			"address6": "1234",
			"address7": "1234",
        },
        {
            "firstName": "Lorraine",
            "lastName": "Wise",
            "company": "Comveyer",
            "employed": "1234",
			"address": "1234",
			"address1": "1234",
			"address2": "1234",
			"address3": "1234",
			"address4": "1234",
			"address5": "1234",
			"address6": "1234",
			"address7": "1234",
        },
        {
            "firstName": "Nancy",
            "lastName": "Waters",
            "company": "Fuelton",
            "employed": "1234",
			"address": "1234",
			"address1": "1234",
			"address2": "1234",
			"address3": "1234",
			"address4": "1234",
			"address5": "1234",
			"address6": "1234",
			"address7": "1234",			
        }
    ];
	$scope.gridOptions.columnDefs = [
	{ name: 'firstName', enableCellEdit:false, width: '20%',headerCellClass: 'blue' },
	{ name: 'lastName', enableCellEdit:false,width: '25%' },
	{ name: 'company', width: '5%'},
	{ name: 'employed', width: '5%'},
	{ name: 'address' , width: '5%'},
	{ name: 'address1', width: '5%' },
	{ name: 'address2', width: '5%' },
	{ name: 'address3', width: '5%' },
	{ name: 'address4', width: '5%' },
	{ name: 'address5', width: '5%' },
	{ name: 'address6', width: '5%' },
	{ name: 'address7' , width: '10%'},
	
	];	


	
    }]);

＆＃13;

    .grid {
      width: 900px;
      height: 250px;
    }
	.blue { color: blue;  }
.ui-grid-header-cell .ui-grid-cell-contents {
     height: 90px;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="app">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
  <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
  <script src="http://ui-grid.info/release/ui-grid.js"></script>
  <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
  <link rel="stylesheet" href="main.css" type="text/css">
</head>

<body>

  <div ng-controller="MainCtrl">
    <br>
    <br>
    <div id="grid1" ui-grid="gridOptions" ui-grid-edit ui-grid-resize-columns class="grid"></div>
  </div>


  <script src="app.js"></script>
</body>

</html>

＆＃13;

Answer 1

如果使用剪辑覆盖文本溢出属性，则可以删除省略号而不会溢出文本。

.ui-grid-header-cell .ui-grid-cell-contents {
   height: 90px;
   -ms-text-overflow: clip;
   -o-text-overflow: clip;
   text-overflow: clip;
 }

plunkr

注意，您也可以使用

停用v

.ui-grid-icon-angle-down::before {
  content: none;
}

在angularjs ui-grid中包装的单词

1 个答案: