文本溢出：省略號對齊問題

我將產品名稱和定價作爲單獨的跨度包含在一個鏈接中，以便與Rich Snippets一起正常工作。某些產品的長度名稱比其他產品長，因此我將截斷長度以適應我的盒子。以前這是在服務器上完成的，但我更喜歡用CSS處理它，所以對設計的任何更改都不會涉及後端頁面的更改。文本溢出：省略號對齊問題

enter image description here

問題是我不能讓跨度旁邊排隊對方。通過修改顯示屬性，文本溢出屬性不起作用。有問題的代碼如下：

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這裏：http://jsfiddle.net/c7p8w/

來源

2013-05-29 Alex Guerin