样式问题-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

那呢？

@CordaService

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

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

Answer 2

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