样式问题- 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也会设置为该宽度。

Answer 2

正如Pete所指出的，你的产品标题被定位为绝对的，这使得它脱离了流程，所以你还需要重新定位价格。