文本溢出：省略号对齐问题 [英] Text-overflow: ellipsis alignment issue

问题描述

我有产品名称和定价，因为单独的跨度内部有一个链接，可以与Rich Snippets正常工作。一些产品有更大的长度名称比其他，所以我截断的长度，所以它适合我有的盒子。以前这是在服务器上完成的，但我更喜欢用CSS处理，所以对设计的任何更改不涉及后端页面的变化。

I have the product name and pricing as separate spans insides a link to work properly with Rich Snippets. Some products have larger length names than others so I'm truncating the length so it fits the box I have. Previously this was done on the server but I'd prefer to have it handled with CSS so any changes to the design doesn't involve the backend pages changing.

问题是我无法跨越彼此相邻排列。修改显示属性后，text-overflow属性不起作用。有问题的代码如下：

The problem is I cannot make the spans line up next to each other. With tinkering the display attribute, the text-overflow property does not work. The problematic code is below:

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/

jsFiddle here: http://jsfiddle.net/c7p8w/

推荐答案

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

Hard to answer because your fiddle doesn't show the problem. You should be able to fix the issue by giving both spans the same vertical-align setting. Try giving them both vertical-align:top;.

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

Ah, I see the issue in IE.

http://jsfiddle.net/c7p8w/1/rel =nofollow> http://jsfiddle.net/c7p8w/1/

Working fiddle here: http://jsfiddle.net/c7p8w/1/

这篇关于文本溢出：省略号对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！