[thelist] Handling long text inside a <td> in a fluid design

[Bill Moseley]

I've got a fluid design that includes a table (width of table depends
on the browser window width).  One column is user-supplied data, and
it's ok if the user enters text that is longer than will fit in the
column width *if* it wraps.

The browser is pretty good a wrapping text on non alphanumeric
characters within the column, but if the user enters a very long
string of just alphanumeric chars then the browser (at least Firefox)
will not wrap the text and then the <td> width will increase.  E.g.:

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

doesn't get wrapped and the <td> width is adjusted to accommodate that
text.

In this application assume it's not desirable for the user to be able
to enter text that can effect the width of the column in this way.

I want to display all the text, so seems like I have two options.  One
is to use overflow-x: auto and the other is to physically break up the
text.

overflow-x: auto might work, although the scroll bars are not very
pretty in this design.  But, for overflow to work I believe I would
need a fixed column width, and that breaks the fluid design.

I tried using a percentage like:

    <td>
        <div style="width: 20%; overflow-x: auto">
            <% long text %>
        </div>
    </td>

but, that's interesting as the browser sets the width of the <td> as
if overflow was not set (i.e. expands width for the full length of the
text) but the text is rendered in a 20% width scroll area, so end up
with a small scroll bar and a wide, but blank column.  Is that correct
rendering?


The other option is to apply a regular expression to the long text to
insert "-<br />" every so many characters.  Not a great solution,
either.


Any other suggestions?


Thanks,




-- 
Bill Moseley
moseley at hank.org
Sent from my iMutt