CSS截断不起作用

请问为什么价格（$ 33000000.33）当它跳到第二行？我需要在同一行上有一个价格和“超长标题”。基本上，当价格太高时，我需要截断像“Super Lon ...”这样的“Super Long title”，并且仍然都在同一行上。CSS截断不起作用

下面是代码：

<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; 
}

来源

2016-03-09 Kate

使用这些规则集直接在元件上的长文本：

.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 S和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>

来源

2016-03-09 01:47:20 zer00ne

感谢的意见，我的问题就解决了。

.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>

来源

2016-03-10 07:30:20 Kate

CSS截断不起作用

回答

相关问题