Question

I have this problem with css: a dynamic div contains a single line of text that I need to be wrapped every time the div resizes its width to a smaller size.

But my problem is that the text is inside the table. It is not a pure text, it actually serves as a directory of the contacts somehow like a paging.

Please refer to the images that I have attached for a better view of my problem. I also attached part of the code that I have below. See the attached image for a better understanding of the problem.

I’m not well versed in css, so I’m hoping you can suggest a better layout for this.

Hope you can help 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">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=A'">A</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=B'">B</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=C'">C</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=D'">D</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=E'">E</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=F'">F</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=G'">G</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=H'">H</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=I'">I</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=J'">J</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=K'">K</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=L'">L</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=M'">M</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=N'">N</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=O'">O</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=P'">P</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=Q'">Q</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=R'">R</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=S'">S</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=T'">T</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=U'">U</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=V'">V</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=W'">W</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=X'">X</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=Y'">Y</a></td>
            <td align="right">&nbsp;</td>
            <td class="glossary"><a href="www.abc.com?tag=Z'">Z</a></td>
        </tr>
    </table>
</p>
</div>

Answer 1

I removed the <table> and replaced it with a <div> tag:

Live Demo

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 a {
    padding: 0 2px
}