Search code examples
htmlcsspositioningparent

How to fix the text inside the parent element so it wont expand beyond the parent element's width

Help! How can I fix this? It's weird. I usually don't come up with this, but now it's so weird. What I know and expected is that it should not behave like that.
http://www.cssdesk.com/RfNvT

Solution

  • You could use word-wrap:break-word.

    jsFiddle example

    .container {
    word-wrap:break-word;
    width: 50%;
    font-family: segoe ui;
    font-size: 14px;
    border: 1px solid black;
    padding: 8px;
}

    Alternatively, you could also use overflow:hidden, which will hide the overflow. This is assuming you don't want the text to wrap. jsFiddle example

    There is also overflow:auto which will allow you to scroll through the overflow. jsFiddle example