CSS: Truncate table cell and middle the Content - html

Question

i have an Content in an table cell. The content inside is always centered and in the middle. But when the cell is smaller than the Content i want to truncate the Text. But it doesn't work. The Cell has a fixed width and height, but when i truncate it, the cell is to big.
Have anyone an Idea? Or is it possible to use jQuery?
HTML/CSS
<table>
<tr>
<td><a href="">
<div class="ev orange">
<div class="ev_text">EURO VI NORM PRODUCT MODIFICATION, M1 LANE KEEPING ASSIST N2 & M2</div>
</div>
</a>
</td>
</tr>
</table>
.ev {
color: #000;
cursor: pointer;
transition: box-shadow 0.1s linear;
/* line-height: 28px; */
position: relative;
height: 51px;
display: table;
border-left: 1px solid black;
border-right: 1px solid black;
font-size: 8px;
width: 20px;
height: 20px;
}
.ev_text {
color: #000;
cursor: pointer;
transition: box-shadow 0.1s linear;
line-height: 17px;
position: relative;
max-height: 51px;
min-height: 51px;
overflow: hidden;
line-height: normal;
display: table-cell;
vertical-align: middle;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Here's my fiddle:
http://jsfiddle.net/vnx0sb2L/1/

Answer 1

Edit html structure and css as below.
<div class="ev_text">
<p class="truncate">EURO VI NORM PRODUCT MODIFICATION, M1 LANE KEEPING ASSIST N2 M2</p>
</div>
// css
.truncate{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 51px;
max-height: 51px;
}
The reason of this problem is you have made a div as display: table-cell where ellipsis works with block level element.
You can remove overrride properties from .ev_text class.

Answer 2

Test like this :
<style>
.ev {
color: #000;
cursor: pointer;
transition: box-shadow 0.1s linear;
/* line-height: 28px; */
position: relative;
height: 51px;
/*display: table;*/
border-left: 1px solid black;
border-right: 1px solid black;
font-size: 8px;
width: 20px;
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ev_text {
color: #000;
cursor: pointer;
transition: box-shadow 0.1s linear;
line-height: 17px;
position: relative;
max-height: 51px;
min-height: 51px;
overflow: hidden;
line-height: normal;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<table>
<tr>
<td style='max-width:12px;height:auto;'>
<div class="ev orange">
<div class="ev_text">EURO VI NORM PRODUCT MODIFICATION, M1 LANE KEEPING ASSIST N2 & M2BLALALLALALALLALALLALALALA</div>
</div>
</td>
</tr>
</table>
The text overflow have to be in .ev no in .ev_text
EDIT :
Also remove in css display table