CODEWITHSUNDEEP
htmlcssoverflowhidden
Ivan Seidel
Ivan Seidel

Reputation: 2372

How to vertical align in a div WITH overflow:hidden

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!

Upvotes: 0

Views: 3262

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324820

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.

Upvotes: 2

Related Questions