html - No word break in two floating divs -

<table class="project-table">         <thead>             <tr class="align-top">                 <td class="short-col heading">project name</td>                 <td class="short-col heading align-center">project id</td>                 <td class="short-col heading">date &amp; time</td>                 <td class="short-col heading">student</td>             </tr>         </thead>         <tbody>                   <tr class="bottom-row-dashed">                     <td class="long-col">                             <div class="achievement-box float-left">winner</div>                          <div class="float-left margin-left">intrusion detection system in cloud architecture</div>                         <div class="clear"></div>                     </td>                     <td class="short-col align-center">1</td>                     <td class="short-col">01 apr 2014, 09:30 pm</td>                     <td class="short-col">sayan chowdhury</td>                 </tr>             <tr>         </tr></tbody>     </table> 

the stylus file:

table.project-table     font-size: 13px     margin-top: 10px     width: 100%     border-collapse: collapse     .bottom-row-dashed         border-bottom: 1px dashed border-color      .margin-right         margin-right: 2px     .margin-left         margin-left: 2px      td         &.short-col             width: 1%         &.large-col             width: 20%         &.medium-col             width: 10%     tr         &.align-top             vertical-align: top 

the div contains "winner" , "intrusion detection system in cloud architecture" float left. added word-wrap:break-word; did not breaking breaking term "intrusion detection system in cloud architecture". short-col , long-col class defines width of table column

how can break term "intrusion detection system in cloud architecture" based on width.?

edit: want have "intrusion detection system in cloud architecture" , "winner" on same line word should break off in middle based on width

check out demo

i added break
tag

 <div class="float-left margin-left">intrusion detection<br> system in cloud architecture</div> 

output fiddle

another way

another way of doing it

setting of max width trick

 th{      padding-left:30px;     }     td{      padding-left:30px;           max-width: 200px; /*or whatever*/       word-wrap: break-word;     }     th:first-child{         padding-left:0px;     }     td:first-child{         padding-left:0px;     } 

output using word wrap , max-width

check out latest

 display:inline;