Текст не разбивается во второй строке

Question

Текст не разбивает текст во второй строке. Он показывает только половину текста на первой строке. Это рекламное приложение, и я использую платформу моей компании. Когда я загружаю файлы, я получаю дополнительные div, добавленные в исходный файл. Это link, где я загрузил свой код.

В исходном HTML у меня есть только эти дивы добавлены

<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> 

Лишние дивы и я думаю, что их дизайн является причиной проблемы. Я могу написать javascript, чтобы изменить стиль div, но я не могу понять, откуда эта проблема.

Answer 1

Вам необходимо добавить стиль CSS white-space:normal; в ваш элемент #productName.

#productName{ 
    white-space:normal; 
} 

См. Это Fiddle.

white-space: nowrap; становится применяются рядным к родительской обертке, так что вам нужно переопределить и установить его обратно в нормальный ..

Answer 2

Это просто отлично работает с расщеплением в новой строке. См. Здесь - http://jsbin.com/laliqipevi/edit?html,js,output

Хотя, поскольку вы дали фиксированную высоту для div (50px), часть текста разрезается снизу. Вы можете исправить, создав большую высоту ящика, позволяя автоматически настраивать (снимая высоту) или устанавливать overflow-y из div на scroll.

Answer 3

Просто добавьте свойство white-space: normal в Div # ProductName: http://jsfiddle.net/stdob/6cqt7opj/5/

Answer 4

Вашего DIV # product_0 имеет атрибут white-space: nowrap в своем стиле, который унаследован этим div. Удалите это или перезапишите его, добавив white-space: normal в ваш div id=productName

Answer 5

Проверьте, что все области div определены ... Im думает, что вам не нужно столько div?

<div id="catalog" style="border: 3px solid greey; width: 300px; height: 557px; font-family: Arial, Helvetica, sans-serif; display: block; overflow: hidden; word-break: normal;"> 
    <div style="display: block; position: relative; padding: 0px; margin: 0px; height: 100%; width: 100%; overflow: hidden;"> 
     <div style="border: 2px solid orange; display: block; position: relative; padding: 0px; margin: 0px; white-space: normal; height: 100%;"> 
     <div class="unit-1436405245110" style="border: 3px solid black; padding: 0px; top: 0px; left: 0px; vertical-align: top; white-space: normal; display: inline-block; margin: 0px 10px 0px 0px;"> 
      <div class="prod-1436405245111" style="border: 3px solid green; padding: 0px; top: 0px; left: 0px; vertical-align: top; position: relative; display: inline-block; overflow: hidden; margin: 0px 10px 10px 0px;"> 
       <div id="product_0" style="border: 2px solid yellow; font-family: Arial, Helvetica, sans-serif; overflow: hidden; word-break: normal;"> 
        <div id="productName" style="border: 1px solid green; width: 300px; height: 50px;font-family: Arial, Helvetica, sans-serif; overflow: hidden; word-break: normal; display: block;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </div> 
        <div id="productImage" style="border: 1px solid red; 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="border: 1px solid blue; width: 300px; height: 50px; font-family: Arial, Helvetica, sans-serif; overflow: hidden; word-break: normal;">$10</div> 
       </div> 
      </div> 
      <br> 
     </div> 
     </div> 
    </div> 
</div>