How to keep text inside the parent?

css, html

Solution

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

#container {
    margin: 10px;
    width: 400px;
    border: 2px solid red;
    word-wrap: break-word;
}

jsFiddle example

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

Lastly, there is `overflow:scroll` which will allow you to scroll through the overflow. Note - there will always be a scrollbar regardless of the length of the text. To avoid this you could also use `overflow:auto`. I don't know what you want. jsFiddle example of `overflow:scroll`

Problem

Lets say take this as an example: ``` <!DOCTYPE html> <html> <head> <title>Test</title> <link type="text/css" rel="stylesheet" href="s.css"> </head> <body> <div id="container"> <p>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</p> </div> </body> </html> ``` css: ``` * { margin:0px; padding:0px; } #container { margin:10px; width:400px; border: 2px solid red; } ``` And it displays like so: What do I do to place this kind of texts always within the parent div?

Original source