如何在带有溢出的div中垂直对齐

Question

i know that there is a lot of tutorials about verticaly align text inside a div, but i need to do that with "overflow:hidden", but it only works with "display: block", not with "display: table-cell". Here is the html: http://melondev.com.br/twitter/ (Take a look at the long text, even with "overflow: hidden" they continue to go...) Thanks!

Answer 1

You could just apply overflow: hidden to the cotaining element.

Strictly speaking, having an element with display:table-cell that is not inside an element with display:table-row which itself is not inside an element with display:table will frequently lead to unpredictable results and unexpected behaviour, this being one of them. Instead, you could easily have used a <table> element like this:

<table style="table-layout: fixed;">
    <tr>
        <td style="width: 100px; overflow: hidden; vertical-align: middle;">Text here</td>
    </tr>
</table>

The above works! You could also have rows for your note header and stuff. Sure, it's not pretty, but it uses things that were designed for this situation.

But that aside, you have <div> elements inside a <span> - this is not good and many older browsers (and some recent) will reject it. You should never have block-level elements inside an inline-level one.