Difference between word-break & word-wrap property in css

 Welcome to Designers Dairy blog here i have posted Difference between word-break & word-wrap property

CSS:

<style type="text/css">
.container {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  border: 1px solid blue;
  width:50px;



 Word-break:break-all;

 /*** It will break the text  within 50px width without using float:left property; ***/



Word-wrap:break-word; -  Float:left;    /***

 It will break the text  within 50px width  by using float:left property;  ***/


}
</style>


Html Code:

<div class="container">
<div class="row">
         <div class="cell"> CELL A   </div>
        <div class="cell"> CELL B  </div>
        <div class="cell"> CELL C </div>
</div>
</div>


Output:

How to make act Div as Table

 Welcome to Designers Dairy blog here i have posted How to make act Div as Table .


Style Sheet:

<style type="text/css">
.container {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  padding: 1em;
}
</style>

Html Code:

<div class="container">
<div class="row">
         <div class="cell">CELL A</div>
        <div class="cell">CELL B</div>
        <div class="cell">CELL C</div>
</div>