我在表格单元格中有内容。里面的内容总是居中,中间。但是当单元格小于我要截断文本的内容时。但它不起作用。 Cell具有固定的宽度和高度,但是当我截断它时,单元格会很大。 有人有想法吗?或者是否可以使用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;
}
这是我的小提琴: http://jsfiddle.net/vnx0sb2L/1/
答案 0 :(得分:4)
编辑html结构和css,如下所示。
<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;
}
出现此问题的原因是您将div设为display:table-cell其中省略号与块级元素一起使用。
您可以从.ev_text类中删除替换属性。
答案 1 :(得分:0)
像这样测试:
<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>
文本溢出必须在.ev_text
中的.ev中编辑:
也在css显示表中删除