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 colpan
shouldcolspan
also, believe browsers can confused when encountering colspanned td
width style. can safely remove style="width:90%"
, since 2 td
s 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