第二行不分裂的文本
第二行不分裂的文本
提问于 2015-07-09 01:46:13
第二行中的文本不分裂。它只是在第一行中显示了一半的文本。这是一个广告应用程序，我正在使用我公司的平台。当我上传文件，我得到一些额外的div添加到原始文件。这是我上传代码的链接。
在原来的html中，我只有这些div。
<div id="product_0" style="font-family: Arial, Helvetica, sans-serif; overflow: hidden; word-break: normal;">
<div id="productName" style="width: 300px; height: 50px; font-family: Arial, Helvetica, sans-serif; overflow: hidden; word-break: normal;">aaaaaaaaaaaaaI am RedI am RedI am Redm ReI aI am RedI am RedI am Redm ReI aI am RedI am RedI am Redm ReI aI am RedI am RedI am Redm ReI aI am RedI am RedI am Redm Red</div>
<div id="productImage" style="width: 300px; height: 250px; font-family: Arial, Helvetica, sans-serif; overflow: hidden; word-break: normal;">
<img style="width: 100%; height: 100%" src="http://eventsbyfabulous.com/wp-content/uploads/2013/09/samsung-tv-front.jpg">
</div>
<div id="productPrice" style="width: 300px; height: 50px; font-family: Arial, Helvetica, sans-serif; overflow: hidden; word-break: normal;">$10</div>
</div>
</div>很少增加额外的div，我认为它们的设计是造成问题的原因。我可以编写javascript来更改div样式，但是我无法找出问题的来源。
回答 5
Stack Overflow用户
回答已采纳
发布于 2015-07-09 01:52:54
您需要将CSS样式的white-space:normal;添加到#productName元素中。
#productName{
white-space:normal;
}看这个小提琴。
white-space: nowrap;将内联地应用于父包装器，因此您需要重写它并将其设置为正常。
Stack Overflow用户
发布于 2015-07-09 01:53:19
只需将属性white-space: normal添加到div#productName：http://jsfiddle.net/stdob/6cqt7opj/5/
Stack Overflow用户
发布于 2015-07-09 01:55:00
您的div#product_0的样式中有一个属性white-space: nowrap，它是由这个div继承的。通过将white-space: normal添加到div id=productName中，将其删除或覆盖
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31306755
复制相关文章
相似问题
腾讯云开发者
