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 intd, , misses semicolon colpanshouldcolspan
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
Post a Comment