CSS截斷不起作用

Question

您能告訴我為什么長時間跳到第二行時的價格（$ 33000000.33）嗎？ 我需要在同一行上有一個價格和“超長標題”。 基本上，當價格太大時，我需要截斷諸如“ Super Lon ...”之類的“ Super Long標題”，並且仍然將它們放在同一行。

這是代碼：

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

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: inline-block ，

• 使所有錨點display: block

注意：所有添加的outline s和background-color都將顯示元素邊緣存在的位置以及文本被剪切的位置。 它基本上是元素右邊緣同一行上的一致剪輯（無環繞）。

片段

 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>