ellipsis dont show on overflow

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior When the data of a column overflows it truncates the data

Expected behavior the CSS on the column has this overflow: hidden; white-space: nowrap; text-overflow: ellipsis; So i would assume i would see an ellipsis.

Reproduction of the problem I believe this is the issue: datatable-body-cell has the style above, then <div class="datatable-body-cell-label"> has a slightly smaller size. then finally we have a span that overflows.
Therefore due to the extra layer between the style and the overflow content we dont get the ellipsis.

What is the motivation / use case for changing the behavior? Want the user to know they are not seeing all the content. Or if you can wrap the text I would be good with this option too.

Please tell us about your environment: na

• Table version: 0.7.x primeng 2.0.4

• Angular version: 2.0.x @angular/common: 2.4.10 @angular/compiler: 2.4.10 @angular/core: 2.4.10 @angular/flex-layout: 2.0.0-rc.1 @angular/forms: 2.4.10 @angular/http: 2.4.10 @angular/material: 2.0.0-beta.2 @angular/platform-browser: 2.4.10 @angular/platform-browser-dynamic: 2.4.10 @angular/router: 3.4.10 @angular/cli: 1.0.0-rc.4 @angular/compiler-cli: 2.4.10

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Have only tested chrome

• Language: TypeScript

[tmburnell]

Below is what I used to fix the issue in my project … However it has side effects that might not be wanted by some users. So I did not plan on making a PR. As you can see in this screen shot the sort arrow gets pushed to the end of the cell instead of being next to the word. I am not sure you can have both (the sort arrow next to the word and the ellipsis. So maybe we add a class to make them work but you have to flag you want it.

ngx-datatable.material {
    // fix ellipsis on header
    datatable-header-cell {
	* {
	    width: 100%
	}

	span {
	    display: inline-block;

	    span {
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	    }
	}
    }
	
    // fix ellipsis on cells
    .datatable-body-cell-label {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
    }
}

[amcdnl]

@tmburnell - make a PR plz.