我将产品名称和价格作为链接内独立的跨度使用,以正确处理Rich Snippets。一些产品的长度名称比其他产品大,因此我将长度截短以使其适合我的包装盒。以前,这是在服务器上完成的,但我更希望使用CSS处理它,因此对设计的任何更改都不会涉及后端页面的更改。



问题是我无法使跨度彼此相邻排列。通过修补display属性,text-overflow属性不起作用。有问题的代码如下:

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/

最佳答案

很难回答,因为您的小提琴没有显示问题。通过将两个跨度设置为相同的vertical-align设置,您应该能够解决该问题。尝试同时给它们两个vertical-align:top;

编辑:啊,我看到IE中的问题。

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

08-25 15:43
查看更多