How to keep text inside the parent?

Question

Lets say take this as an example:

Answer 1

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

Answer 2

Warning: Probably, your desired behavior is JoshC's answer, but my answer keeps text inside the parent too (in another way).

Use overflow different than visible (i.e auto, scroll or hidden).

On most cases, I recommend auto:

#container {
    margin:10px;
    width:400px;
    border: 2px solid red;
    overflow: auto;
}

Demo

Answer 3

This is unlikely that you will have a single word or string such long length without any spaces. Please reconsider the length of your actual content. Using overflow:hidden you will only hide the extra text outside of the container, i assume thats what you wouldn't want. If you really need a single word which is this much (or even more) long then you need to use word-wrap:break-word or word-break:break-word. Still you can read the following posts for further reference.

how to use automatic css hyphens with word-break: break-all?

How to break long words in a table td?

http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

Answer 4

You have a text string which would not normally exist in the real world where the total width the character/letter images exceeds the set width of parent element.

In the unlikely event of this happening you would use word-wrap: break-word;

JSFiddle with normal text.