CODEWITHSUNDEEP
cssoverflowcss-tablestablecell
Oliver Spryn
Oliver Spryn

Reputation: 17368

CSS Trim Table Content

I am looking for a way to use CSS to trim long content from a table cell. For example. say a given cell contains content which is way too long. The width of the table is adjusted to fit this really long content. However, since the table already consumes 100% width, a lot of the table spills out side of the window to fit this content.

So, my question is, is there a way that I can use CSS (preferably < CSS3 for better IE compatibility) to show text in a table cell up to the cell's width, then hide any overflow with out pushing out the width of the table?

Upvotes: 3

Views: 2184

Answers (2)

Michal
Michal

Reputation: 13649

This is supported in all browsers apart from Firefox (I think). Elipsis produces ... at truncated text and clip just clips text...

td {
  text-overflow: ellipsis;
  /* or text-overflow: clip; */
}

Upvotes: 1

SeanCannon
SeanCannon

Reputation: 78006

Here is a cross-browser solution.

Add this to your CSS: 

/** Custom CSS logic to truncate text with ellipsis **/
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('/assets/xml/ellipsis.xml#ellipsis');
}

Add this file (ellipsis.xml) to your server (in this case, at /assets/xml/):

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text">
                    <children/>
                </xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

Then add the class to any DOM node which requires truncating on overflow:

<div class="ellipsis">....

Upvotes: 3

Related Questions