Question

Textis不会拆分第二行中的文本。它只显示第一行的一半文本。这是一个广告应用程序，我正在使用我公司的平台。当我上传文件时，我会在原始文件中添加一些额外的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;被内联应用于父包装器，因此您需要覆盖它并将其设置回正常状态。

Answer 2

只需将属性white-space: normal添加到div＃productName：http://jsfiddle.net/stdob/6cqt7opj/5/

即可

Answer 3

您的div＃product_0在其样式中具有white-space: nowrap的属性，该属性由此div继承。将white-space: normal添加到div id=productName

，将其删除或覆盖

Answer 4

退房时，所有div区域都已定义......我觉得你不需要这么多div？

     <property>g_defaultPBSConversionParams<Bool>false</Bool></property>
     <property>g_metallicConversions<Vector4>0.025 0.355 1.373 2.913</Vector4></property>
     <property>g_glossConversions<Vector4>0.185 0.478 0.588 0.735</Vector4></property>
     <property>g_albedoConversions<Vector4>0.05 0.65 0.513 0.5</Vector4></property>
     <property>normalMap
<Texture>vehicles/american/tracks/T54_E2_track_NM.dds</Texture></property>
     <property>diffuseMap
<Texture>vehicles/american/tracks/T54_E2_track.dds</Texture></property>
     <property>specularMap
<Texture>vehicles/american/tracks/T54_E2_track_SM.dds</Texture></property>
     <property>alphaReference<Int>16</Int></property>
     <property>alphaTestEnable<Bool>true</Bool></property>

Answer 5

在拆分新行时，它可以正常工作。见这里 - http://jsbin.com/laliqipevi/edit?html,js,output

虽然，由于您已经给div（50px）提供了固定高度，因此文本部分是从底部剪切的。您可以通过创建更大的框高度来修复，允许它自动调整（完全删除高度）或将div的overflow-y设置为scroll。

文本未在第二行中分割

5 个答案: