How to solve problem wordwrap in website

css
How to solve word problems that are too long on the website..

Step by step:
Make file "file.css" :
div {
   background: #ededed;
   border: solid 1px #ccc;
   padding: 10px;
   width: 180px;
   margin: 20px;
}
.break-word {
      word-wrap: break-word;
}
Example html code:
<div class="break-word">
   <h4>breakword</h4>
   <p>http://gspot-design.blogpost.comdhdfklhsdjs;ljflskhglkohdsklfhaklhfdklhaljhoierlksifjoijejrposfpjporejtpojpojflsjfpojptojdepojfpoejrp</p>
</div>
You can make other code like below:
Step by step:
Make file "file.css" :
.code {
        width:720px;
   overflow: auto;
}
Example html code:
<div class="code">
   <h4>breakword</h4>
   <p>http://gspot-design.blogpost.comdhdfklhsdjs;ljflskhglkohdsklfhaklhfdklhaljhoierlksifjoijejrposfpjporejtpojpojflsjfpojptojdepojfpoejrp</p>
</div>

Any question? Just comment..