Усечение CSS не работает

Question

Не могли бы вы посоветовать, почему цена ($ 33000000,33), когда она долго прыгает во вторую строчку? Мне нужно иметь цену и «Супер длинный титул» в той же строке. В принципе, когда цена слишком велика, мне нужно урезать «Супер длинный заголовок», например, «Супер Лон ...» и все еще иметь обе они в одной строке.

Вот код:

<div class="item-description group"> 
    <a href="/pro/test-item-with-variations"> 
    <p class="title truncate-text" title="">Test Item with variationsktvy9i</p> 
    </a> 
    <p class="shop truncate-text" title=""> 
    <a href="/pro">Super long title</a> 
    </p> 
    <a href="/pro/test-item-with-variations"> 
    <p class="price">$33000000.33</p> 
    </a> 
</div> 

Screenshot

.item-description { 
    padding: 15px 10px; 
    background: white; 
    display: block; 
} 
a { 
    text-decoration: none; 
    color: #66c6c3; 
    background-color: transparent; 
} 
p.shop { 
    font-size: 14px; 
} 
.shop { 
    color: #5d6d6d; 
    font-size: 16px; 
    padding: 0; 
    margin: 0; 
    width: 50%; 
    float: left; 
} 
.truncate-text { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 
p { 
    display: block; 
} 
p.shop a { 
    color: #5d6d6d; 
} 
p.price { 
    font-size: 16px; 
} 
.price { 
    color: #62c6c4; 
    font-weight: 600; 
    float: right; 
} 

Answer 1

Используйте эти наборы правил непосредственно на элементе с длинным текстом:

.ellipse { 
    display: block; 
    position: relative; 
    outline: 0; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
    /*vertical-align: middle;*//* for content in a table-cell*/ 
    width: 100%; 
} 

• Удалены все поплавки,

• Размещенные все якоря внутри параграфов,

• Сделано все пункты display: inline-block,

• Сделано все якоря display: block

Примечание: Все добавленные outline с и background-color S являются чтобы показать, где находится край элементов и где текст обрезается. Это в основном последовательный клип на одной строке (без обертывания) на правом краю элемента.

Отрывок

a { 
 
    width: 49%; 
 
    background: rgba(255, 0, 0, .3); 
 
    text-decoration: none; 
 
    color: #66c6c3; 
 
} 
 
p { 
 
    width: 49%; 
 
    outline: 1px solid blue; 
 
    background: yellow; 
 
    display: inline-block; 
 
    position:relative; 
 
} 
 
div { 
 
    outline: 2px dashed #e3e; 
 
} 
 
.ellipse { 
 
    display: block; 
 
    position: relative; 
 
    outline: 0; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    /*vertical-align: middle;*/ 
 
    /* for content in a table-cell*/ 
 
    width: 100%; 
 
} 
 
.item-description { 
 
    padding: 15px 10px; 
 
    background: white; 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
.shop { 
 
    color: #5d6d6d; 
 
    font-size: 16px; 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 49%; 
 

 
} 
 
.shop a { 
 
    color: #5d6d6d; 
 
} 
 
.price { 
 
    color: #62c6c4; 
 
    font-size: 16px; 
 
    
 
}

<div class="item-description group"> 
 
    <p class="title" title=""> 
 
    <a href="/pro/test-item-with-variations" class="ellipse"> 
 
    Test Item with variationsktvy9i&((79777788uhgfrtrfghuooooooogybvtvtuiuy3463%^&8*Upl[lk;klhguifdttftuuuuuuuuuuuuuyvtfcjhgfds</a> 
 
    </p><br/> 
 
    <p class="shop" title=""> 
 
    <a class="ellipse" href="/pro">Super long titlexxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a> 
 
    </p> 
 
    <p class="price" title=""> 
 
    <a href="/pro/test-item-with-variations" class="ellipse">$3300000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000.33</a> 
 
    </p> 
 
</div>

Answer 2

Спасибо за комментарии, моя проблема решена.

.item-description { 
 
    padding: 15px 10px; 
 
    background: white; 
 
    display: block; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: #66c6c3; 
 
    background-color: transparent; 
 
} 
 
p.shop { 
 
    font-size: 14px; 
 
} 
 
.shop { 
 
    color: #5d6d6d; 
 
    font-size: 16px; 
 
    padding: 0; 
 
    margin: 0; 
 
    min-width: 10%; 
 
} 
 
.truncate-text { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
p.shop a { 
 
    color: #5d6d6d; 
 
} 
 
p.price { 
 
    font-size: 16px; 
 
} 
 
.price { 
 
    color: #62c6c4; 
 
    font-weight: 600; 
 
    float: right; 
 
}

<div style="width:190.5px;"> 
 
<div class="item-description group"> 
 
    <a href="/pro/test-item-with-variations"> 
 
    <p class="title truncate-text" title="">Test Item with variationsktvy9i</p> 
 
    </a> 
 
    <div style="height:20px;"> 
 
    <a href="/pro/test-item-with-variations"> 
 
    <span class="price">$33000000.33</span> 
 
    </a> 
 
    <p class="shop truncate-text" title=""> 
 
    <a href="/pro">Super long title</a> 
 
    </p> 
 
    </div> 
 
</div> 
 
</div>