CSS: crop table cell and in the middle of content
I have Content in a 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 that won't work. The cell has a fixed width and height, but when I truncate it the cell will be large. Anyone have an idea? Or can jQuery be used?
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/
+3
source to share
2 answers
Modify the html and css structure as shown 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 for this problem is because you made the div to be display: table-cell, where the ellipsis works on the block level element.
You can remove overridden properties from the .ev_text class.
+4
source to share
Check the following:
<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>
Text overflow should be in .ev not in .ev_text
EDIT:
Also remove in the display table css
0
source to share