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

Question

What can I add to the CSS property so that the text inside the div element does not extend to my background color? I assume that since the actual width of the div element is equal to the width of the full page, so I will have to compress my div element.

Please see an example here.

example

<div class="test">sadfssdfjklsdfjklsdfsdfksdfkhsdfksdfkhsdfkhsdkhfsdhkfksdhkhsdfkhsdk</div> .test { background: grey; width: 400px; height: 100px; } 

Answer 1

In this scenario, I use the combination below CSS.

text-overflow: ellipsis will give you an indication that there is actually more text than shown (using the ellipsis character ( ... )). overflow: hidden make sure that the content does not go beyond the parent border and white-space: nowrap ensures that the text remains on one line.

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

jsfiddle.net/josangel555/6d0wz2Lc/

Answer 2

You can use the following CSS:

 .test { background: grey; width: 400px; height: 100px; word-wrap: break-word; } 

word-wrap says:

The word-wrap property is used to indicate whether the browser can break lines in words to prevent overflow when the otherwise unbreakable line is too long to fit in its field.

Look at the fiddle for this.

Answer 3

You must add overflow: auto; along with word-wrap: break-word; in

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

if the text inside the div is larger than the size of the div to allow scrolling automatically.

Answer 4

Just add word-wrap: break-word; into your code.

 .test { background: grey; width: 400px; height: 100px; word-wrap:break-word; } 

Below is an example of the updated JSFiddle of your example. Also, check out the word-wrap property to see why this method can be used and what property values ​​might come in handy in the future.