CSS截断不起作用

Question

请问为什么价格（$ 33000000.33）长时间跳到第二线？我需要有一个价格和超长标题＆＃34;在同一条线上。基本上，当价格太大时，我需要截断超长标题＆＃34;喜欢＆＃34; Super Lon ......＆＃34;例如，仍然在同一条线上。

以下是代码：

<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都是为了显示元素边缘的位置以及剪切文本的位置。它基本上是在元素右边缘的同一行（无包装）上的一致剪辑。

<强>段

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

感谢您的评论，我的问题已经解决了。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;