wrap a single line of text in a dynamic div - html

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"> </td>
<td class="glossary">A</td>
<td align="right"> </td>
<td class="glossary">B</td>
<td align="right"> </td>
<td class="glossary">C</td>
<td align="right"> </td>
<td class="glossary">D</td>
<td align="right"> </td>
<td class="glossary">E</td>
<td align="right"> </td>
<td class="glossary">F</td>
<td align="right"> </td>
<td class="glossary">G</td>
<td align="right"> </td>
<td class="glossary">H</td>
<td align="right"> </td>
<td class="glossary">I</td>
<td align="right"> </td>
<td class="glossary">J</td>
<td align="right"> </td>
<td class="glossary">K</td>
<td align="right"> </td>
<td class="glossary">L</td>
<td align="right"> </td>
<td class="glossary">M</td>
<td align="right"> </td>
<td class="glossary">N</td>
<td align="right"> </td>
<td class="glossary">O</td>
<td align="right"> </td>
<td class="glossary">P</td>
<td align="right"> </td>
<td class="glossary">Q</td>
<td align="right"> </td>
<td class="glossary">R</td>
<td align="right"> </td>
<td class="glossary">S</td>
<td align="right"> </td>
<td class="glossary">T</td>
<td align="right"> </td>
<td class="glossary">U</td>
<td align="right"> </td>
<td class="glossary">V</td>
<td align="right"> </td>
<td class="glossary">W</td>
<td align="right"> </td>
<td class="glossary">X</td>
<td align="right"> </td>
<td class="glossary">Y</td>
<td align="right"> </td>
<td class="glossary">Z</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
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
</div>
</p>
</div>
CSS:
#tblGlossary a {
padding: 0 2px
}

Answer 2

Replace your entire table with a div without a fixed width:
<div id="divGlossary">
<a href="#" >#</a>
A
B
C
...
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.

Answer 3

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

Answer 4

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