javascript - 文本不在第二行拆分

Question

文本未拆分第二行中的文本。它只在第一行显示一半的文本。这是一个广告应用程序，我正在使用我公司的平台。当我上传文件时，我会在原始文件中添加一些额外的 div。这是link我在哪里上传了我的代码。

在原来的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 样式，但我无法弄清楚问题出在哪里。

Answer 1

您需要将 CSS 样式 white-space:normal; 添加到您的 #productName 元素。

#productName{
    white-space:normal;
}

查看此 Fiddle .

white-space: nowrap; 正在内联应用于父包装器，因此您需要覆盖它并将其设置回正常状态。