Make HTML table cell's content fit - without wrapping?

Question

This is my situation :

I'm currently in the process of finalizing a rather... huge web application (PHP with CodeIgniter, MySQL, Javascript+Ajax+Jquery and using various Javascript libraries - e.g. dataTables)

The issue :

Let's say we've got a table, fixed-width.
The first column is also fixed-width. (Let's say at 200px)
When the table is populated :
- If the contents of the first column occupy less than 200px space, it's ok.
- If the contents exceed those 200px then the content is wrapped, thus creating a "double line" effect and higher rows than I'd wished.

Hint :

"Shrinking" a very very very long line to something like very very very ... is what I'm thinking. Is something like that even possible? Server-side?

How would you approach that? (preferably in an elegant way - 'coz, yep, I admit that I have a few solutions in mind, none of which seems... user-friendly... lol)

@BillyMoat Just updated my initial post to give you the general idea. — Dr.Kameleon, Aug 16 '12 at 12:10
Maybe something like this jQuery plugin? http://plugins.learningjquery.com/expander/ — Billy Moat, Aug 16 '12 at 12:11
Maybe truncate at a certain point and just show the full thing on hovering a Read More link? — Hazem Salama, Aug 16 '12 at 12:15
@BillyMoat Hmmm.. There really is a jQuery plugin for anything! lol. Thanks! I'm currently having a look into it. — Dr.Kameleon, Aug 16 '12 at 12:15
@hsalama What you suggest is even closer to what I had in mind. I'm just checking if this type of thing has already been implemented (e.g. as part of a plugin, like BillyMoat mentioned) — Dr.Kameleon, Aug 16 '12 at 12:16

score 1 · Accepted Answer · edited May 23 '17 at 12:20

I think doing a string-truncation is impossible serverside, if you are not using a monospace font so that the same number of characters always has the same width. What you could do is a client-side string-truncation:

(Nice code at Calculate text width with JavaScript):

CSS:

#testing-div
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
}

JS:

var test = document.getElementById("testing-div");
test.style.fontSize = fontSize;
var height = (test.clientHeight + 1) + "px";
var width = (test.clientWidth + 1) + "px";

You can loop through the entire length of the string, and keep adding a character to the body of #testing-div, calculating the width, and checking if it fits. Make sure you add the ... if the string is too long.

Make HTML table cell's content fit - without wrapping?

1 Answers1