[英]Styling issue - CSS Ignoring white-space: nowrap;
我在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>
那这个呢?
.product-item--info {
width: auto;
background: red;
position: absolute;
}
.product-title {
padding: 2px 0px;
overflow: auto;
}
背景红色只是为了您可以看到div的宽度。
这样,div就是文本的长度,并且已经设置了填充。 如果我从标题中删除一些字符以使其更小,则div也会设置为该宽度。
正如Pete所指出的那样,您的产品标题定位为绝对商品,这使其无法流通,因此您还需要重新定位价格。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.