CSS overflow hidden causing text alignment problems - html

Question

I have some pretty simple markup and I want long text to be truncated with "..."
.topRow div {
display: inline-block;
}
#name {
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="topRow">
<div id="edit">
<div id="pre">Before -</div>
<div id="name">Some long text that should get truncated when it passes the max width</div>
<div id="post">- After</div>
</div>
</div>
Fiddle : http://jsfiddle.net/xyPrv/3/
The problem is that when I add overflow: hidden to the div, it makes the text jump up a few pixels and is out of alignment with the rest of the text around it.
What is causing this vertical movement? Without manually pushing the text back down (with position: relative; and top: 5px), how can I cleanly get the text to be aligned?

Answer 1

Try this:
.topRow div {
display: inline-block;
vertical-align:middle;
}
#name {
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="topRow">
<div id="edit">
<div id="pre">Before -</div>
<div id="name">Some long text that should get truncated when it passes the max width</div>
<div id="post">- After</div>
</div>
</div>
http://jsfiddle.net/V79Hn/

Answer 2

If you change this:
.topRow div {
display: inline-block;
}
to this:
.topRow div {
float:left;
}
Then it's as you want it.

Answer 3

Or just use:
div {
width: 100%;
line-height: 1.2em;
height: 3.6em;
background-color: gainsboro;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}