wrap a single line of text in a dynamic div

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>
            <开发者_如何学Go;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>

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
}

Replace your entire table with a div without a fixed width:

<div id="divGlossary">
    <a href="#" >#</a>
    &nbsp;
    <a href="www.abc.com?tag=A'">A</a>
    &nbsp;
    <a href="www.abc.com?tag=B'">B</a>
    &nbsp;
    <a href="www.abc.com?tag=C'">C</a>
    &nbsp;
...

Since you already have the table inside a div, you can use that one.

The word-wrap property does not apply to table cells in the way that you want it.

You can't get a table to wrap. Well, I guess you could try to display: inline on everything...?

If you don't mind using a scrollbar, you can apply the following style :

#longlines {
clip : auto;
overflow : scroll;
}

that will fix your problem i hope let me know

 <div width="10%" style="position: absolute; left: 2%; word-wrap:break-word;"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div width="86%" style="position: absolute; left: 14%;word-wrap:break-word;"> bbbb </div>

Or

use <Span> </span> around your text