Search code examples
csshtmlwidthalignmentcrop

CSS-only formatting of variable-sized cropped field

I have a text string and a numeric ID that I want to display next to each other:

This is a String [123]

Seems simple enough, but I can't control the length of the string or the size of the container that I'm placing this in. The first challenge is getting these to line up next to each other and I used a trick I found on SO:

<div>
    <div class="display_field">
        <div class="label">This is a long string that should be cropped.</div>
        <div class="id">[123]</div>
    </div>
</div>

Applying this CSS, I get the two strings next to each other:

* { font-size: 12px; }  /* Just for testing. */

.label, .id {
    display: table-cell;
}

Now I can display This is a long string that should be cropped. [123]

The problem is if the outermost DIV is a fixed width that is too small (which it often is):

<div style="width:125px;"> <!-- Just testing, I have no control over this guy. -->
    <div class="cropped_field">
        <div class="label">This is a long string that should be cropped.</div>
        <div class="id">[123]</div>
    </div>
</div>

The output will look now like this:

This is a long string  [123]
that should be
cropped.

And what I want is This is a long string [123]

I have tried everything I could think of, setting the heights of the DIVs to 12px (so it matches the font height) and setting overflow to hidden, using a full-fledged table, I even considered using Flash. I've tried a ton of options - so far I've been at this for three or four hours.

I've been getting so many helpful answers by googling and finding helpful posts on SO, I decided to join and try asking my own question.

A few things to note (not sure if these hurt or help the situation):

  • I can't control the value of the ID, it might be [1] or [9999999] - I don't want to hard-code the width of that (or the "display_field" or the "label" for that matter. Even percentages will cause issues.

  • This environment might not have JavaScript enabled (I wish, I'd use a jQuery plugin!)

  • The container might be any type of tag, but will usually be a DIV. I don't really have control of the markup outside of my "display"field".

  • I control the markup of the "display_field" and can use SPAN tags or any other HTML that gets the job done.

  • I'm only writing this for FireFox (3 is required) and Chrome, other compatibility with crappy browsers isn't necessary (yes, I'm looking at you IE).

  • The "id" field will always be a number in square brackets, so there's no white space to worry about.

  • There's no need to put ellipsis in where the cropped text ends. It's a nice feature, but I don't see any way to get it working on FireFox (there's a hack for 3.x, but nothing for version 4).

Solution

  • How about the following? It is mostly based on the extracts you provided.

    .cropped_field
{
    height:1.4em;
    overflow:hidden;
}

    Take a look at the demo fiddle.