G
Ooh. white-space There is no smooth transition to CSS transitions. But you can animate the height of the block, like:table td > div div {
overflow: hidden;
max-height: 24px;
transition: max-height 0.5s, z-index 1s;
z-index: 0;
}
table td > div div:hover {
max-height: 96px;
transition: max-height 0.5s, z-index 0s;
z-index: 1;
}
This code is:We always have a few lines of text (yes, many things at the end will have to be abandoned);But limit the maximum height of the unit to one line;And with the chole, we allow a maximum height of several lines (take the value experimental, don't push too much, or the animation will be sharp);z-index It is important to animate the way in which the example is, or when the writing is down from the following lines, it will be over the one on which the hover was and which has not yet turned.table {
border: 1px solid #f7f7f7;
margin-bottom: 5px;
margin-top: 5px;
width: 100%;
table-layout: fixed;
}
td {
border: 1px solid #f7f7f7;
background: #FFF;
height: 55px;
max-width: 200px;
text-overflow: ellipsis;
}
.tdsp {
overflow: hidden;
}
table td > div {
position: relative;
}
table td > div div {
background: #fff;
overflow: hidden;
position: absolute;
width: 100%;
max-height: 24px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
margin-top: -11px;
transition: max-height 0.5s, z-index 1s;
z-index: 0;
}
table td > div div:hover {
max-height: 96px;
transition: max-height 0.5s, z-index 0s;
z-index: 1;
}
th {
border-radius: 0;
background: #000;
color: #FFF;
}<table class="bordered centered">
<thead>
<tr>
<th>Тест</th>
<th>Тест</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tdsp">Тест</td>
<td>
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</td>
</tr>
<tr>
<td class="tdsp">Тест</td>
<td>
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</td>
</tr>
<tr>
<td class="tdsp">Тест</td>
<td>
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</td>
</tr>
<tr>
<td class="tdsp">Тест</td>
<td>
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</td>
</tr>
<tr>
<td class="tdsp">Тест</td>
<td>
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</td>
</tr>
<tr>
<td class="tdsp">Тест</td>
<td>
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</td>
</tr>
<tr>
<td class="tdsp">Тест</td>
<td>
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</td>
</tr>
<tr>
<td class="tdsp">Тест</td>
<td>
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</td>
</tr>
<tbody>
</table> https://jsfiddle.net/gambala/ryd7xjk8/