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 & 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
i added break
tag
<div class="float-left margin-left">intrusion detection<br> system in cloud architecture</div> output fiddle
another way
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
display:inline; 
Comments
Post a Comment