Setting the Max length in a <TD>

Question

I have a column where some users are not entering spaces (i.e.: .........................................) and it is stretching my TD column.

Is there a way to force line breaks in html with a simple option? If not, I think I am going to have to break the line up myself, which would not be optimal, as I would have to determine the best places to break a line, and I don't want to do that.

I am looking for something that will work in the 3 main browsers (ie/firefox/safari)

Here is my code:

<td valign="top">
    <br><strong><?php echo $common->stripHtml($row['one_liner']); ?></strong><br>
    <hr>
    <?php
     if (strlen($row['self_description']) > 240)
     {
      echo substr($common->stripHtml($row['self_description']), 0, 240)."... <a href='viewprofile.php?i=".$row['user_id']."'>more</a>";
     }
     else
     {
      echo $common->stripHtml($row['self_description']);
     }
    ?>
</td>

Answer 1

Use fixed width cells?

<td valign="top" width="100px">

Answer 2

A fixed-width cell combined with hiding overflow content should do the trick

The CSS:

table {
    table-layout:fixed;
}

table td {
    overflow:hidden;
}

Targeting this HTML:

<!-- This width specification ought to be in the top-most <td> or <th>  -->
<td width="100" >...</td>

Answer 3

While you could manually add line breaks with PHP, you can also use the "overflow" CSS property to determine how the cell should display its data.

If you set the overflow to "auto", a scrollbar should appear within the cell, and if you set the overflow to "hidden", the contents will be hidden beyond the width you have set.

Answer 4

"as I would have to determine the best places to break a line, and I don't want to do that."

You've hit the nail on the head there, HTML is equally unable to determine the best place to break the line. Maybe as you know the likely values you can determine a set of rules for allowing breaks.

I would choose a fixed width font to display the text and then insert a break after a fixed number of chars.

Answer 5

You could use the CSS overflow property on the table cell, but this will not force a line break.

You could insert some

­

entities, but browser support is patchy.

The best solution would be a regex to break up any continuous sequence of 20 characters by inserting a space. It won't look pretty, but it's better than throwing it all out of line.

Answer 6

No css property can break lines without white spaces.

By combining a "width:xxx", an "overflow:hidden" and a "table-display:fixed", you can hide unwanted content in your cells.

Answer 7

Another "fix" could be to use Javascript. When that particular input-element's .blur() event is raised, insert breaks at every xth char, or after every xth word. I personally wouldn't call this a "great" solution though.

Then again, I'm assuming you have the ability to monitor the submissions coming through your site. If this is the case, then you can manipulate the data via PHP/C# - which would be the ideal method.