文本溢出：省略号对齐问题答案

【问题标题】：Text-overflow: ellipsis alignment issue文本溢出：省略号对齐问题
【发布时间】：2013-05-29 02:11:51
【问题描述】：

我将产品名称和定价作为单独的跨度包含在链接中，以便与 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/

【问题讨论】：

标签： html truncate rich-snippets css

【解决方案1】：

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

编辑：啊，我在 IE 中看到了问题。

在这里工作：http://jsfiddle.net/c7p8w/1/

【讨论】：