我将产品名称和价格作为链接内独立的跨度使用,以正确处理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/