CSS property so that the text inside <div> element does not extend outside of background of <div>

Question

What can I add to CSS property so that the text inside the div element does not extend out of my background color? I'm guessing that because the actual width of the div element is width of full page, so I will have to shrink my div element.

Please see example here

example

<div class="test">sadfssdfjklsdfjklsdfsdfksdfkhsdfksdfkhsdfkhsdkhfsdhkfksdhkhsdfkhsdk</div>

.test {
background: grey;
width: 400px;
height: 100px;
}

Answer 1

In this scenario I use a combination of the below CSS.

text-overflow: ellipsis will give you an indication that the actually more text is present than what is shown (using an ellipsis (...) symbol).. overflow: hidden ensure that no content goes out of the parent boundary and white-space: nowrap ensures the text will stay in only one line.

overflow:hidden;
white-space: nowarp;
text-overflow: ellipsis;

jsfiddle.net/josangel555/6d0wz2Lc/