Text-overflow: проблема с выравниванием многоточия

У меня есть название продукта и цена в виде отдельных промежутков внутри ссылки для правильной работы с Rich Snippets. Некоторые продукты имеют более длинные названия, чем другие, поэтому я сокращаю длину, чтобы она соответствовала моей коробке. Раньше это делалось на сервере, но я бы предпочел, чтобы это обрабатывалось с помощью CSS, поэтому любые изменения в дизайне не влекут за собой изменение внутренних страниц.

введите здесь описание изображения

Проблема в том, что я не могу выровнять промежутки рядом друг с другом. При изменении атрибута отображения свойство 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 css truncate rich-snippets
person Alex Guerin    schedule 29.05.2013    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Трудно ответить, потому что ваша скрипка не показывает проблему. Вы должны быть в состоянии исправить проблему, задав для обоих промежутков одну и ту же настройку vertical-align. Попробуйте дать им обоим vertical-align:top;.

Редактировать: Ах, я вижу проблему в IE.

Рабочая скрипка здесь: http://jsfiddle.net/c7p8w/1/

person Jake    schedule 29.05.2013