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

Question

我在一个设置为固定宽度的 div 中有一些文本。

我希望 div 根据文本的长度垂直展开和缩回。

我已经关闭了 white-space: nowrap; 和 overflow: hidden; 将文本换行到我想要的第二行，但它没有不要垂直扩展包含的 div 框并使下方的价格进一步向下移动，而是与其重叠。

我下面的代码是我想要它做的事情的简化版本 - 它可以工作。

但是我的附件图片显示了 Inspector 中的真实网站，我无法开始工作。我需要更改其他地方的一些代码吗？

	.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

这个呢？

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


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

背景为红色，以便您可以看到 div 的宽度。

有了这个，div 就是文本的任何长度，并且已经设置了填充。如果我从标题中删除一些字符以使其变小，则 div 也会设置为该宽度。