CODEWITHSUNDEEP
javascriptjquerycsshtml
Coder
Coder

Reputation: 169

Text not splitting in the second line

Textis not splitting the text in the second line. It is just showing half of the text on the first line. It is an ad application and i am using my company's platform. When i upload the files i get some extra divs added to the original file. This is the link where i have uploaded my code.

In the original html i have only these divs

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

Few extra divs are added and i think their design is causing the problem. I can write the javascript to change the div style but i am not able to figure out where the problem is coming from.

Upvotes: 0

Views: 74

Answers (5)

Flamur Beqiraj
Flamur Beqiraj

Reputation: 2007

Check out, all div's area are defined... Im thinking you don't need this much div's?

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

Upvotes: 0

Arman
Arman

Reputation: 374

Your div#product_0 has an attribute of white-space: nowrap in its styling which is inherited by this div. Remove that or overwrite it by adding white-space: normal to your div id=productName

Upvotes: 2

stdob--
stdob--

Reputation: 29172

Just add property white-space: normal to div#productName: http://jsfiddle.net/stdob/6cqt7opj/5/

Upvotes: 2

zgood
zgood

Reputation: 12571

You need to add the CSS style white-space:normal; to your #productName element.

#productName{
    white-space:normal;
}

See this Fiddle.

white-space: nowrap; is getting applied inline to a parent wrapper, so you need to override that and set it back to normal..

Upvotes: 2

Bikas
Bikas

Reputation: 2759

It just works fine with splitting in new line. See here - http://jsbin.com/laliqipevi/edit?html,js,output

Although, since you've given fixed height to the div (50px), the portion of text is cut from bottom. You can fix by creating, bigger box height, allowing it to auto adjust (removing height altogether) or setting overflow-y of div to scroll.

Upvotes: -1

Related Questions