样式问题-CSS忽略空白：nowrap;

Question

I have some text inside a div which is set to a fixed width.

I want the div to expand and retract vertically depending on the length of text.

I have turned off white-space: nowrap; and overflow: hidden; which wraps the text onto a second line as I want it to, but it doesn't vertically expand the containing div box and make the price underneith move further down, it instead overlaps it.

My code below is a simplified version of what I want it to do - which works.

However my attached image shows the real website in Inspector that I cannot get to work. Could there be some code elsewhere I need to change?

  .product-item--info { width: 100px; } .product-title { padding: 2px 0px; overflow: hidden; text-overflow: ellipsis; /*toggling this on and off shows what I want my real example to do*/ /*white-space: nowrap;*/ text-overflow:ellipsis; } 

  <div class="product-item--info"> <h2 class="product-title" itemprop="model"> <a href="https://proco.infigosoftware.com/villagepos/p/496/extra-bank-holiday-savings-50x40">Extra Bank Holiday Savings 50x40</a> </h2> <br> <div class="alternate--prices"> <span class="productPrice">0.00</span> </div> <br> <div class="description" itemprop="description"> FV001776 </div> <br> <div class="product--stockquantity"> Stock: 50 </div> </div> 

Answer 1

What about this?

.product-item--info {
  width: auto;
  background: red;
  position: absolute;
    }


.product-title {
    padding: 2px 0px;
overflow: auto;
}

background red just so you can see the width of the div.

With this, the div is whatever length the text is with the padding already set. If I remove some characters from the header to make it smaller, the div also sets to that width.

Answer 2

正如Pete所指出的那样，您的产品标题定位为绝对商品，这使其无法流通，因此您还需要重新定位价格。