CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Jon Hudson
Jon Hudson

Reputation: 1184

Text not wrapping in paragraph element

I have two floated divs, side by side, with p tags inside. The text within the p tags does not wrap and just overflows the container, as you can see in the text under the images:

Example:

My HTML looks like so:

        <div class="submenu">
            <h3>Destinations in Europe</h3>
            <ul>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
                <li><a href="#">dfgdgdgfgdg</a></li>
            </ul>
            <h3>Features</h3>
            <div>
                <img src="/assets/images/o/menu/city-feat-one.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl
                </p>
            </div>
            <div>
                <img src="/assets/images/o/menu/city-feat-two.jpg" />
                <h4>blahblah</h4>
                <p>
                    khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl
                </p>
            </div>           
        </div>

My CSS:

#rb-menu-com li .submenu > div { 
    width:48%;
    float:left;
    position: relative;
}

#rb-menu-com li .submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative;
}

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
}

Has anyone experienced this before? I haven't!! Driving me mad!

Upvotes: 75

Views: 233350

Answers (13)

Sachin
Sachin

Reputation: 91

If the desired result is to break the line by complete word use:

p { word-break: break-word; }

else you can use:

p { word-break: break-all; }

Upvotes: 6

Quentin
Quentin

Reputation: 943585

Word wrapping only occurs when there is a word break.

If you have a "word" that is as long as that, then there is no place for it to break.

The proper solution is to write real content and not nonsense strings of characters. If you are using user generated content, then add a check for exceptionally long words and disallow them (or cut out part of them for URLs while keeping the whole thing in a link).

Alternatively, you can use the word-break CSS property to tell the browser to line break in the middle of words.

p { word-break: break-all }

(Note browser support).

Alternatively, you can use overflow to truncate the text if it won't fit in the container.

Upvotes: 120

Sowmya
Sowmya

Reputation: 26969

That is because you have continuous text, means single long word without space. To break it add word-break: break-all;

.submenu div p {
    color:#fff;
    margin: 0;
    padding:0;
    width:100%;
    position: relative; 
    word-break: break-all; 
    background:red;
}

DEMO

Upvotes: 5

Londoner 19
Londoner 19

Reputation: 69

This is a little late for this question but others might benefit. I had a similar problem but had an added requirement for the text to correctly wrap in all device sizes. So in my case this worked. Need to setup the view port.

 .p
   {
   white-space: normal;
    overflow-wrap: break-word;
    width: 96vw;
   }

Upvotes: 6

Mark
Mark

Reputation: 380

Adding width: 100%; to the offending p element solved the problem for me. I don't know why it works.

Upvotes: 0

Ross Grambo
Ross Grambo

Reputation: 21

For others that find themselves here, the css I was looking for was

overflow-wrap: break-word;

Which will only break a word if it needs to (the length of the single word is greater than the width of the p), unlike word-break: break-all which can break the last word of every line.

overflow-wrap demo

Upvotes: 1

TheTechGuy
TheTechGuy

Reputation: 17354

The solutions is in fact

p{
    white-space:normal;
}

You can change the break behaviors by modifying, word-break property

p{
    word-break: break-all; // will break at end of line 
}

break-all: Will break the string at the very end, breaking at the last word word-break: is more of pretty brake, will break nicely for example at ? point normal: same as word-break

Upvotes: 3

Developer_D
Developer_D

Reputation: 47

EASY

p{
    word-wrap: break-word;
}

Upvotes: 0

matthewsheets
matthewsheets

Reputation: 4573

To anyone still struggling, be sure to check and see if you've set a line-height value on the font in question: it could be overriding the word wrap.

Upvotes: 24

Kevin Oonk
Kevin Oonk

Reputation: 71

You can use word-wrap to break words or a continuous string of characters if it doesn't fit on a line in a container.

word-wrap: break-word;

this will keep breaking lines at appropriate break points unless a single string of characters doesn't fit on a line, in that case it will break.

JSFiddle

Upvotes: 3

user1164594
user1164594

Reputation: 161

This is not an answer to the question but as I found this page while looking to an answer to a problem that I had, I want to mention the solution that I found as it cost me a lot of time. In the hope this will be useful to others:

The problem was that text in a <p> tag would not fold in the div. Eventually, I opened the inspector and noticed a 'no breaking space entity' between all the words. My editor, vi, was just showing normal blank spaces (some invisible chr, I don't know what) but I had copied pasted the text from a PDF document. The solution was to copy a blank space from within vi and replace it with a blank space. ie. :%s/ / /g where the blank to be replaced was copied from the offending text. Problem solved.

Upvotes: 4

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

Give this style to the <p> tag.

p {
    word-break: break-all;
    white-space: normal;
}

Upvotes: 155

naresh kumar
naresh kumar

Reputation: 2241

add float: left property to the image.

#rb-menu-com li .submenu div img {
    border:1px solid #fff;
    float:left;
}

Upvotes: -3

Related Questions