Fog Creek Software
Discussion Board




HTML Question

How do you stop very long strings (i.e. no spacesin them) from "deforming" tables and other HTML elements.  For example, if I had a column of a table that was 25% of the page and a string whose length was 50% of the page, but did not want that string to 'extend' that column width wise, how would I code that.  Do I have manually break the string up or truncate it?

Ex.

A normal string

Averyverylongstringthatcauseslotsofproblemswithmycode

Should be:

Averyverylong
stringthatcaus
eslotsofproble
mswithmycode

Any help would be appreciated.

HTML
Wednesday, February 05, 2003

Can you put word breaks in there? ie. use the <wbr> tag, eg:

here<wbr>is<wbr>a<wbr>really<wbr>long<wbr>string<wbr>dude

Other things to try are setting a CSS style for the a block-element in a column, specifying a width and setting an overflow property, eg:

<style>
.ConstrainedWidth {
    width: 25%;
    overflow: hidden;
}
</style>

...

<td>
    <p class="ConstrainedWidth">
        hereisareallylongstringdude
    </p>
</td>


The width could be in pixels (px), ems (em), etc.

According to the CSS spec overflow and clip only work with block (eg. ps, divs, etc) and replaced elements (eg. images), so you'll have to surround your text in a <div> or a <p> or something similar.

IE6 also supports a proposed value of "ellipsis" for overflow, which might be a nice way of handling things.

Walter Rumsby
Wednesday, February 05, 2003

Thanks Walter.  I will give that a try.  Maybe I should clarify my intentions.  I am try to handle rogue strings typed into a textarea.  For example:

;asklfj;aslkfj;alskfj;alskfj;alskfj;alskfj;aslkfhj;aslkjf;salkfj;aslkjf;salkfj;aslkjf;aslhkfj;slkfhj;lskjf;laskfj;lsakjf;lskjf;laskjf;lsakfj;lsjfk;lsakfj;alskhfj;lasfjk;lsakjf;aslkfhj;alsfdhj;aslkfj;asldfjk;salfdjk;saldfkj;saldfkjas;lfdkjs;aldfkj;saldfj;asldfjsa;ldfj

Should not extend the column that it is displayed in, but should wrap or be truncated at the column width.

HTML
Wednesday, February 05, 2003

Looks like Joel truncates them... but how?

HTML
Wednesday, February 05, 2003

It appears that he uses the property "table-layout: fixed" on his tables.  I've been trying to figure out how to do this as well, so I'm glad I found this thread.

anon
Wednesday, February 05, 2003

... combined with <COL WIDTH=110><COL WIDTH=510>. View source on this page and you'll see.

Joel Spolsky
Wednesday, February 05, 2003

Ironically, it doesn't work in Opera.  So this thread scrolls horizontally for me... ;>

Sam Gray
Wednesday, February 05, 2003

It would be ironic if this was a forum for the Opera web browser.

anon
Wednesday, February 05, 2003

In the VB world

strInPain = Left(strVictim, intMaxNumberOfChars)

truncates. There's a LeftB too for bytes-based truncation.

A quick improvement is to ensure the stuff left out by Left get's wrapped. Use a loop.

OR Look for stretches of text using Regex:

(stretch one of 20 chars)(stretch two of 20 chars) for example and replace it using \1[invisible wrappable character]\2

Both solutions are rough, you have to eyeball it, they aren't perfect. But they are no nonsense and fast.


But that's just two way out of thousands to do it, good luck.

Li-fan Chen
Wednesday, February 05, 2003

The wrap still exists in Mozilla 1.2 too.

Here's a "side by side" comparison of the two techniques I outlined - using overflow gives you precise control over the width of the column, but I'm not aware of a property that will wrap values in the block.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-au">
<head>
    <title>Constrained Width</title>
    <style media="screen" type="text/css">
        td {
            border-color: #999999;
            border-style: solid;
            border-width: 1px
        }

        .Constrained1 > p {
            overflow: hidden;
            width: 100px;
        }

        .Constrained2 {
            width: 100px;
        }
</style>
</head>
<body>
    <table>
        <tr>
            <td class="Constrained1">
                <p>
                    Averyverylongstringthatcauseslotsofproblemswithmycode
                </p>
                <p>
                    Averyverylongstringthatcauseslotsofproblemswithmycode
                </p>
            </td>
            <td class="Constrained2">
                <p class="Other">
                    Averyverylongstring<wbr>thatcause<wbr>slotsofproble<wbr>mswithmycode
                </p>
                <p class="Other">
                    Averyverylongstring<wbr>thatcause<wbr>slotsofproble<wbr>mswithmycode
                </p>
            </td>
        </tr>
    </table>
</body>
</html>

Walter Rumsby
Thursday, February 06, 2003

Hmm,

The CSS-based approach above works in Mozilla 1.2, but not IE6.

Hmm.

Walter Rumsby
Thursday, February 06, 2003

STYLE="table-layout: fixed"

This tag fixed the problem.  Thanks guys.

>> "The CSS-based approach above works in Mozilla 1.2, but not IE6."

I can't get the CSS approach to work in IE6 either.

>> "Ironically, it doesn't work in Opera."

I don't know if there is a way to make it compatible with all browsers. Seeing as how I'm only interested in IE6, at the moment, the above style tag works along with specifiying column percentages (in my case).

HTML
Thursday, February 06, 2003

specify the column widths only on a colgroup of the first row of the table... no need to do it on every row.

fool for python
Thursday, February 06, 2003

....colgroup OR the first row....

and it gives you progressive rendering:

http://michaelw.net/Articles/TablesvsLists.html

fool for python
Thursday, February 06, 2003

This is a Microsoft Extension to CSS that should work in > IE 5.5.  I've only tested it to work in IE 6.0.2800.1106 on WinXP, but it works fine:

<style type="text/css">
    table { table-layout: fixed; width: 600px; }
    td { word-wrap: break-word; width: 25%; }
</style>

Jeff MacDonald
Thursday, February 06, 2003

Why not just validate/trunc it when they submit it?

Steven Wisener
Thursday, February 06, 2003

This thread is an example of why I read JOS almost every day. I learn stuff every single time.

Thanks guys for the intellectual sparks.

WNC
Saturday, February 08, 2003

Perhaps if you use:

      white-space:nowrap;
      overflow: hidden;

it may work?
The white-space:nowrap keeps the wrap from occuring and the overflow:hidden chops off the extra.

Anon
Tuesday, July 06, 2004

*  Recent Topics

*  Fog Creek Home