[英]CSS truncation doesn't work
Could you please advice why the price($33000000.33) when it is long jumping to the second line? 您能告诉我为什么长时间跳到第二行时的价格($ 33000000.33)吗? I need to have a price and "Super Long title" on the same line. 我需要在同一行上有一个价格和“超长标题”。 Basically, when the price is too big then I need to truncate the "Super Long title" like "Super Lon..." for example and still have both on the same line. 基本上,当价格太大时,我需要截断诸如“ Super Lon ...”之类的“ Super Long标题”,并且仍然将它们放在同一行。
Here is the code: 这是代码:
<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>
.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;
}
Use these rulesets directly on the element with the long text: 在带有长文本的元素上直接使用这些规则集:
.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%;
}
Removed all floats, 删除了所有浮标,
Placed all anchors inside the paragraphs, 将所有锚点放置在段落中,
Made all paragraphs display: inline-block
, display: inline-block
所有段落display: inline-block
,
Made all anchors display: block
使所有锚点display: block
Note: All added outline
s and background-color
s are to show where the edge of elements exist and where the text is clipped. 注意:所有添加的outline
s和background-color
都将显示元素边缘存在的位置以及文本被剪切的位置。 It's basically a consistent clip on the same line (no wrapping) at the right edge of the element. 它基本上是元素右边缘同一行上的一致剪辑(无环绕)。
Snippet 片段
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>
Thanks for comments, my problem is solved. 感谢您的评论,我的问题已经解决。
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.