Text-overflow: ellipsis alignment issue

Question

I have the product name and pricing as separate spans insides a link to work properly with Rich Snippets. Some products have larger length names than others so I'm truncating the length so it fits the box I have. Previously this was done on the server but I'd prefer to have it handled with CSS so any changes to the design doesn't involve the backend pages changing.

The problem is I cannot make the spans line up next to each other. With tinkering the display attribute, the text-overflow property does not work. The problematic code is below:

HTML:

<div class="details" itemscope itemtype="http://data-vocabulary.org/Product"> 
<h2>
    <a class="heading" href="/product/acmesw" title="Acme Super Widget">
        <span class="trunc" itemprop="name">Acme Super Widget 3000</span>
        <span itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">- <meta itemprop="currency" content="AUD" /><spanitemprop="price">$199.95</span></span>     
     </a>
 </h2>

CSS:

.details {
    width:300px;
    border:1px solid red;
}
.trunc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width:60%;
}

h2 span {
    display:inline-block;
}

jsFiddle here: http://jsfiddle.net/c7p8w/

Answer 1

Hard to answer because your fiddle doesn't show the problem. You should be able to fix the issue by giving both spans the same vertical-align setting. Try giving them both vertical-align:top;.

Edit: Ah, I see the issue in IE.

Working fiddle here: http://jsfiddle.net/c7p8w/1/