html - wrap a single line of text in a dynamic div -
i have problem css: dynamic div contains single line of text need wrapped every time div resizes width smaller size.
but problem text inside table. not pure text, serves directory of contacts somehow paging.
please refer images have attached better view of problem. attached part of code have below. see attached image better understanding of problem.
i'm not versed in css, i'm hoping can suggest better layout this.
hope can me. thank you! :)
<div id="divsearch" style="width:350px"> <p style="word-wrap:break-word;white-space:pre-wrap;"> <table id="tblglossary"> <tr> <td class="glossary"><a href="#" >#</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=a'">a</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=b'">b</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=c'">c</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=d'">d</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=e'">e</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=f'">f</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=g'">g</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=h'">h</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=i'">i</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=j'">j</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=k'">k</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=l'">l</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=m'">m</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=n'">n</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=o'">o</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=p'">p</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=q'">q</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=r'">r</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=s'">s</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=t'">t</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=u'">u</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=v'">v</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=w'">w</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=x'">x</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=y'">y</a></td> <td align="right"> </td> <td class="glossary"><a href="www.abc.com?tag=z'">z</a></td> </tr> </table> </p> </div> 
i removed <table> , replaced <div> tag:
html:
<div id="divsearch" style="width:350px"> <p style="word-wrap:break-word;white-space:pre-wrap;"> <div id="tblglossary"> <a href="#">#</a> <a href="www.abc.com?tag=a'">a</a> <a href="www.abc.com?tag=b'">b</a> <a href="www.abc.com?tag=c'">c</a> <a href="www.abc.com?tag=d'">d</a> <a href="www.abc.com?tag=e'">e</a> <a href="www.abc.com?tag=f'">f</a> <a href="www.abc.com?tag=g'">g</a> <a href="www.abc.com?tag=h'">h</a> <a href="www.abc.com?tag=i'">i</a> <a href="www.abc.com?tag=j'">j</a> <a href="www.abc.com?tag=k'">k</a> <a href="www.abc.com?tag=l'">l</a> <a href="www.abc.com?tag=m'">m</a> <a href="www.abc.com?tag=n'">n</a> <a href="www.abc.com?tag=o'">o</a> <a href="www.abc.com?tag=p'">p</a> <a href="www.abc.com?tag=q'">q</a> <a href="www.abc.com?tag=r'">r</a> <a href="www.abc.com?tag=s'">s</a> <a href="www.abc.com?tag=t'">t</a> <a href="www.abc.com?tag=u'">u</a> <a href="www.abc.com?tag=v'">v</a> <a href="www.abc.com?tag=w'">w</a> <a href="www.abc.com?tag=x'">x</a> <a href="www.abc.com?tag=y'">y</a> <a href="www.abc.com?tag=z'">z</a> </div> </p> </div> css:
#tblglossary { padding: 0 2px }
Comments
Post a Comment