css - mobile web app with very long strings -


i'm trying build web app designed mobiles. have links extremely large. want break these strings if text doesn't fit, , use entire string if fits.

i tried using word-wrap:break-word:

.breakword {     width: 100%      word-wrap: break-word; } 

my html is:

<table>   <tr>    <td rowspan="2" style="width:10%" >picture</td>    <td colspan="2" style="width:90%" class="breakword">link</td>   </tr>     <tr>     <td style="width:80%">info1</td>    <td style="width:10%">info2</td>    </tr>   <tr>   </tr>  </table> 

this code doesn't fit on page - horizontal scroll bar appears.

how can make text fit?

if correct errors in source, work.

  • remove width:100% style block. conflicts inline style in td, , misses semicolon
  • colpan should colspan

also, believe browsers can confused when encountering colspanned td width style. can safely remove style="width:90%", since 2 tds below set width correctly already.

edit:
doesn't work everywhere. according answers this question, problem table: first, width of table calculated, , 10% , 90% taken calculated width instead of available width on screen.
possible solution give table specific width, , set table-layout fixed.

<table style="width:100%; table-layout:fixed"> 

Comments

Popular posts from this blog

django - How can I change user group without delete record -

java - Need to add SOAP security token -

java - EclipseLink JPA Object is not a known entity type -