Page 1 of 1

Word wrapping in HTML Tables

Posted: Tue Oct 20, 2020 11:55 am
by Wasindear
So my character and their friend have started making a game using the dice they found. I have been writing down the rules they have been making up and the time has come for them to write them down in character. However I am having a real difficulty in getting the html table to word wrap automatically. Could anyone with more experience with Cantr html peculiarities offer some advice please?

Here is the current code I've been trying:

<table style="width: 310px;word-wrap:break-all;table-layout: fixed;">
<tbody>
<tr>
<td style="width: 90px; text-align: center;">Example text that is long enough to overflow</td>
<td style="width: 220px; text-align: center;">Why won't you wrap? I've done everything I can think of! OH GOD JUST WRAP! T_T </td>
</tr>
</tbody>
</table>

and here is the style tag:

<style type="text/css">
table,th,td {
border:1px solid black;
border-collapse:collapse;
word-wrap:break-all;
}
th,td {
padding:2px;
text-align:middle
}
</style>

And results in this:

Image

Which is also interesting because it highlights the text is wrapping just not in anyway that makes sense to me!!

Any help, advice, or even commiseration at this point, would be greatly appreciated :D

Re: Word wrapping in HTML Tables

Posted: Tue Oct 20, 2020 12:03 pm
by Wasindear
I have found the solution

table,th,td {
border:1px solid black;
border-collapse:collapse;
word-wrap:break-all;
white-space:normal
}

Image

leaving this thread though for future generations :P

Re: Word wrapping in HTML Tables

Posted: Tue Oct 20, 2020 1:06 pm
by alecto
Oh thank the stars it's not just me, lol

...Although I seem to be having the opposite problem, where tables and lists are wrapping where I don't want them to, argh.

I've found this works, mostly:
white-space:nowrap