Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Paragraph flows out of div in "Don't overthink it grids" example.

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #158811
    dravine
    Participant

    Hello friendly gurus.

    I based a design off the nice tutorial “Don’t overthink it Grids” by Chris.

    Code: http://codepen.io/anon/pen/xdFhr

    I basically made a whole website from there – and then I discovered a problem.

    Specific combinations of word length/words would let the paragraph break out of the parent div – as you can see in the first paragraph

    “BIDFIK roolbool rackorack op deenoopaloomba ka jandalop me pep google lopski perfect preference group call later go take foot pep universal.”

    Thanks for reading.

    Regards,

    #158837
    Paulie_D
    Member

    Not seeing the issue in the Codepen provided.

    #159035
    dravine
    Participant

    Hello Paulie and thanks for the reply.

    This is what I see (screenshot):

    http://upl.io/zgsyni

    As you can see it goes out the right edge.

    #159039
    Paulie_D
    Member

    Can’t do anything with an image.

    If you can’t reproduce it in a Codepen perhaps you could provide a live link we could look at.

    #159041
    dravine
    Participant

    Try resizing the window. Firefox+Chrome both on my Mac and Windows shows the overflow.

    #159047
    Paulie_D
    Member

    Weird.

    Have you found this with normal text? The wrapping seems to be fine with lorem text.

    Can you duplicate it with a long string of actual English text?

    Do browsers actually ‘know’ English and so ‘know’ when to break a word…I wouldn’t have thought so?

    A quick fix

    p {
      word-wrap: break-word;
    }
    
    #159050
    paulob
    Participant

    Hi,

    I’m guessing you copied that text from somewhere and have invisible characters instead of spaces and therefore the line won’t break.

    Paste the text into notepad and then copy from notepad and paste it back into your page and I think you will find it will work ok.

    You have to be careful when copying text and code from applications as they may contain invisible characters that you don’t want in your html.

    The word-wrap:break-word mentioned above will make the text break at the end of the line but won’t cause the text to wrap like normal text (at the space) as it will split words instead.

    #159052
    Koopa
    Participant

    I had a similar problem once, when I copied text out of a MS Word document Saving the document as .rtf helped.

    #159073
    dravine
    Participant

    When things are dim give em’ Vim ! (http://mm.iit.uni-miskolc.hu/Data/Supports/VIM/pics/vim.petros.15percent.jpg)

    :%s/\%xa0/ /gc

    I replaced some invisible/hidden chars with the above command.

    I thank you all for the nice christmas present!!

    I can now sleep again at night without having a webpage with overflows :)

    Merry X-Mas everyone!

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.