Wrapping text to new line inside div

Question

I have two divs where the text inside them will often change. When the contents inside the two divs becomes two wide for the container div I would like the left div to wrap the text to a new line.

This is my desired results:
This is my desired result:

<html>
    <head>
         <style type="text/css">
             #header {
                position:relative;
                height: 100px;
                width:150PX;
              }

              #leftdiv {
                position: absolute;
                float:left;
                left:0px;
                bottom:0px;
                font-size: 10px; 
               }     

              #rightdiv {
                position:absolute;
                float:right;
                right:0px;
                bottom:0px;
                font-size: 10px; 
             }
          </style>
      </head>
      <body>
          <div id="header">
             <div id="leftdiv">Content in Left Div</div>
             <div id="rightdiv">Content in Right More</div>
          </div>
      </body>
</html>

Possible duplicate of http://stackoverflow.com/questions/502500/css-word-wrapping-in-div? — Kyle Muir, Oct 10 '13 at 22:58
Is there a particular reason the elements need to be absolutely positioned? — 3066d0, Oct 10 '13 at 22:59
You dont seem to have any `width` set for those `div`s... That should be your problem. — Giovanni Silveira, Oct 10 '13 at 22:59
I don't want to set a width because the width of the text will change — bradley4, Oct 10 '13 at 23:02
Yes the absolute positions places the divs where I want them in the container — bradley4, Oct 10 '13 at 23:04
Using position absolute you can't solve it. You will have to find another way to layout your elements. Probably `display: inline-block` or `table_cell` ? And put a width on the right element to make sure the left one breaks. — Colandus, Oct 10 '13 at 23:42
@Colandus how will putting a width on the right one break the left element? That makes less sense than his initial approach without widths.. — Giovanni Silveira, Oct 10 '13 at 23:51
Ok, thanks guys. It looks like I need to find another approach. — bradley4, Oct 10 '13 at 23:56
If you elaborate more on what exactly you want to do, we could help... What you explained made little to no sense :) — Giovanni Silveira, Oct 11 '13 at 00:42
I agree with @GiovanniSilveira pls. elaborate more on what exactly what you want so we can help you to solve your problem, using `float` having `width` also solve your problem. [http://jsfiddle.net/5yTgV/ — jhunlio, Oct 11 '13 at 01:48

score 5 · Answer 1 · edited Feb 04 '18 at 21:36

5

Use this word-wrap: break-word;

Assign all those divs in which you want text to wrap a class and then style that class using word-wrap: break-word;

edited Feb 04 '18 at 21:36

Vishwesh Jainkuniya

2,821
3
18
35

answered Oct 10 '13 at 23:02

Andy897

6,915
11
51
86

Thats not the problem – Giovanni Silveira Oct 10 '13 at 23:07

Wrapping text to new line inside div

1 Answers1