How to Indicate Long Text into a Smaller Fixed Column with CSS

How do I indicate long text into a smaller fixed column with CSS?

You can do this with CSS alone:

.box {
    -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    width: 300px;                 /* fixed width */
}

Note: You will want to check on the latest browser support.

CSS: Constrain a table with long cell contents to page width?

To achieve this, you have to wrap the long text into two divs. The outer one gets position: relative and contains only the inner one. The inner one gets position: absolute, overflow: hidden, and width: 100% (this constrains it to the size of the table cell).

The table-layout algorithm now considers those table cells empty (because absolutely-positioned elements are excluded from layout calculations). Therefore we have to tell it to grow that column regardless. Interestingly, setting width: 100% on the relevant <col> element works, in the sense that it doesn’t actually fill 100% of the width, but 100% minus the width of all the other columns (which are automatically-sized). It also needs a vertical-align: top as otherwise the (empty) outer div is aligned middle, so the absolutely-positioned element will be off by half a line.

Here is a full example with a three-column, two-row table showing this at work:

CSS:

div.outer {
    position: relative;
}
div.inner {
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}
table {
    width: 100%;
    border-collapse: collapse;
}
td {
    border: 1px dotted black;
    vertical-align: top;
}
col.fill-the-rest { width: 100%; }

HTML:

<table>
    <col><col><col class="fill-the-rest">
    <tr>
        <td>foo</td>
        <td>fooofooooofooooo</td>
        <td>
            <div class='outer'>
                <div class='inner'>
                    Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>barbarbarbarbar</td>
        <td>bar</td>
        <td>
            <div class='outer'>
                <div class='inner'>
                    Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text Some more long text
                </div>
            </div>
        </td>
    </tr>
</table>

In this example, the first two columns will have the minimum possible size (i.e. spaces will make them wrap a lot unless you also add white-space: nowrap to them).

jsFiddle: http://jsfiddle.net/jLX4q/

How to truncate text in a table column?

There is a way to achieve this without setting the width of the 'long' table cell.

Here are the ingredients:

Add border-collapse: collapse and table-layout: fixed to the table class and give a width instead of a max-width.

• The border-collapse: collapse will give all cells one shared border.
• The table-layout: fixed sets a fixed width.
• Use width to set a fixed width instead of a max-width (can grow to...).

Next to this, add overflow: hidden to the long table cell (next to the initial additions you made), so it knows what to do if the content overflows.

In CSS:

.mytable {
    border-collapse: collapse;
    width: 400px;
    table-layout: fixed;
}

.long-td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Demo:

td {
  border: 1px solid;
}

.mytable {
  border-collapse: collapse;
  width: 400px;
  table-layout: fixed;
}

.long-td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

max-width on the table is ignored when nowrap and text-overflow is present:
<table class="mytable">
  <tr>
    <td>short</td>
    <td class="long-td">long long long long long long long long long long long long long long long long long long long long long long long long </td>
    <td>short</td>
  </tr>
</table>

.limit{    width:50px;    word-wrap: break-word;}

<div class="limit">    <p>fasfhfhsjdhkjhdkjhfjkhdsfjkhdfjhdfiuhadfhjdfhjadskf kjahsdjfahdfuahsdf dhsf</p></div>

table {  border: 1px solid black;  table-layout: fixed;  width: 200px;}
th,td {  border: 1px solid black;  width: 100px;  overflow: hidden;}

<table>  <tr>    <th>header 1</th>    <th>header 234567895678657</th>  </tr>  <tr>    <td>data asdfasdfasdfasdfasdf</td>    <td>data 2</td>  </tr></table>

<div class="crop">longlong longlong longlong longlong longlong longlong </div>​

.crop {width:100px;overflow:hidden;height:50px;line-height:50px;}​