文本溢出：省略号对齐问题(Text-overflow: ellipsis alignment iss

我有产品名称和价格作为独立的跨距内部链接与丰富网页摘要正常工作。 有些产品比别人，所以我截断长度以适合我的箱子长度较长的名字。 以前这是在服务器上完成，但我更愿意把它与CSS处理，这样的设计的任何变化不涉及后端的网页发生变化。

问题是我不能让跨度彼此相邻排队。 摆弄的显示属性，文本溢出属性不起作用。 有问题的代码如下：

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/

Answer 1:

很难回答，因为你的小提琴不显示的问题。 您应该能够通过给出跨越同来解决该问题vertical-align设置。 尝试给他们两个vertical-align:top; 。

编辑：嗯，我在IE中看到的问题。

在这里工作的小提琴： http://jsfiddle.net/c7p8w/1/

文章来源: Text-overflow: ellipsis alignment issue