Text not wrapping in p tag

Question

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     My HTML looks like so            lt div class  submenu  gt               lt h3 gt Destinations in Europe lt  h3 gt               lt ul gt                   lt li gt  lt a href     gt dfgdgdgfgdg lt  a gt  lt  li gt                   lt li gt  lt a href     gt dfgdgdgfgdg lt  a gt  lt  li gt                   lt li gt  lt a href     gt dfgdgdgfgdg lt  a gt  lt  li gt                   lt li gt  lt a href     gt dfgdgdgfgdg lt  a gt  lt  li gt               lt  ul gt               lt h3 gt Features lt  h3 gt               lt div gt                   lt img src   assets images o menu city-feat-one jpg    gt                   lt h4 gt blahblah lt  h4 gt                   lt p gt                      khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhljhiououhljhiououhljhiououhljhiououhljhiououhl                  lt  p gt               lt  div gt               lt div gt                   lt img src   assets images o menu city-feat-two jpg    gt                   lt h4 gt blahblah lt  h4 gt                   lt p gt                      khkhjhjkhkyhkighkjfkhkiyhohhjkhjlhkluoiulohlhjhiououhl                  lt  p gt               lt  div gt                      lt  div gt    My CSS    rb-menu-com li  submenu  gt  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

User · Answer

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

User · Answer

EASY  p      word-wrap  break-word

User · Answer

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  lt p gt  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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Adding width  100   to the offending p element solved the problem for me  I don t know why it works

User · Answer

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

User · Answer

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

User · Answer

Give this style to the  lt p gt  tag   p       word-break  break-all      white-space  normal

User · Answer

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

User · Answer

add float  left property to the image    rb-menu-com li  submenu div img       border 1px solid  fff      float left

[html] Text not wrapping in p tag

Examples related to html

Examples related to twitter-bootstrap

Examples related to css