CSS: Truncate table cells, but fit as much as possible

bootstrap 4 table truncate text
css text-overflow
text-overflow: ellipsis flex
material-ui table cell ellipsis
css ellipsis table column
text-overflow fade
text-overflow: ellipsis without width
css truncate with ellipses

Meet Fred. He's a table:

<table border="1" style="width: 100%;">
    <tr>
        <td>This cells has more content</td>
        <td>Less content here</td>
    </tr>
</table>

Fred's apartment has a bizarre habit of changing size, so he's learned to hide some of his content so as not to push all the other units over and shove Mrs. Whitford's living room off into oblivion:

<table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;">
    <tr>
        <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td>
        <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td>
    </tr>
</table>

This works, but Fred has a nagging feeling that if his right cell (which he's nicknamed Celldito) gave up a little space, his left cell wouldn't be truncated quite as much of the time. Can you save his sanity?


In summary: How can a table's cells overflow evenly, and only when they've all given up all their whitespace?

<table border="1" style="width: 100%;">
    <colgroup>
        <col width="100%" />
        <col width="0%" />
    </colgroup>
    <tr>
        <td style="white-space: nowrap; text-overflow:ellipsis; overflow: hidden; max-width:1px;">This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.This cell has more content.</td>
        <td style="white-space: nowrap;">Less content here.</td>
    </tr>
</table>

http://jsfiddle.net/7CURQ/

html CSS: Truncate table cells, but fit as much as possible?, $(window).resize(function() { $('.row').each(function() { var row_width = $(this).​width(); var cols = $(this).find('td'); var left = cols[0]; var lcell_width = $(left).width();​  html - working - CSS: Truncate table cells, but fit as much as possible truncate text css (12) Check if "nowrap" solve the issue to an extent.

Truncate String with Ellipsis, I'm sure it's wonderful and serves many other purposes outside of my own situation…but still…241 lines. Good God! The only possible way to get around this that I can think of would be to calculate a width for each cell based on the number of characters each contains (out of the total number of characters for all cells), either server or client-side (the former probably being the more performant choice).

I've been faced the same challenge few days ago. It seems Lucifer Sam found the best solution.

But I noticed you should duplicate content at spacer element. Thought it's not so bad, but I'd like also to apply title popup for clipped text. And it means long text will appear third time in my code.

Here I propose to access title attribute from :after pseudo-element to generate spacer and keep HTML clean.

Works on IE8+, FF, Chrome, Safari, Opera

<table border="1">
  <tr>
    <td class="ellipsis_cell">
      <div title="This cells has more content">
        <span>This cells has more content</span>
      </div>
    </td>
    <td class="nowrap">Less content here</td>
  </tr>
</table>
.ellipsis_cell > div {
    position: relative;
    overflow: hidden;
    height: 1em;
}

/* visible content */
.ellipsis_cell > div > span {
    display: block;
    position: absolute; 
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1em;
}

/* spacer content */
.ellipsis_cell > div:after {
    content: attr(title);
    overflow: hidden;
    height: 0;
    display: block;
}

http://jsfiddle.net/feesler/HQU5J/

Ellipsis for text overflow in table cell? · Issue #454 · facebookarchive , Hi there, I was wondering if it is possible to have the table behave like to a cell and then play with the css but I get the same result, no ellipsis showing Many thanks btw all of the columns have the same width size. how to  This way I can specify the width on the thing I care about (the table cell) without having to repeat all the white-space, overflow CSS properties for each cell. The class on the div also makes it clear what its purpose is.

If Javascript is acceptable, I put together a quick routine which you could use as a starting point. It dynamically tries to adapt the cell widths using the inner width of a span, in reaction to window resize events.

Currently it assumes that each cell normally gets 50% of the row width, and it will collapse the right cell to keep the left cell at its maximum width to avoid overflowing. You could implement much more complex width balancing logic, depending on your use cases. Hope this helps:

Markup for the row I used for testing:

<tr class="row">
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
    <td style="overflow: hidden; text-overflow: ellipsis">
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </td>
</tr>

JQuery which hooks up the resize event:

$(window).resize(function() {
    $('.row').each(function() {
        var row_width = $(this).width();
        var cols = $(this).find('td');
        var left = cols[0];
        var lcell_width = $(left).width();
        var lspan_width = $(left).find('span').width();
        var right = cols[1];
        var rcell_width = $(right).width();
        var rspan_width = $(right).find('span').width();

        if (lcell_width < lspan_width) {
            $(left).width(row_width - rcell_width);
        } else if (rcell_width > rspan_width) {
            $(left).width(row_width / 2);
        }
    });
});

CSS text-overflow property, column-count column-fill column-gap column-rule column-rule-color column-​rule-style The text-overflow property specifies how overflowed content that is not displayed should be The numbers in the table specify the first browser version that fully supports the property. The text is clipped and not accessible, Play it ». le problème est la 'table-layout:fixed' qui crée des colonnes uniformément espacées-de largeur fixe. Mais la désactivation de cette propriété CSS tuera le débordement de texte parce que la table deviendra aussi grande que possible (et qu'il y a une note à débordement).

There's a much easier and more elegant solution.

Within the table-cell that you want to apply truncation, simply include a container div with css table-layout: fixed. This container takes the full width of the parent table cell, so it even acts responsive.

Make sure to apply truncation to the elements in the table.

Works from IE8+

<table>
  <tr>
    <td>
     <div class="truncate">
       <h1 class="truncated">I'm getting truncated because I'm way too long to fit</h1>
     </div>
    </td>
    <td class="some-width">
       I'm just text
    </td>
  </tr>
</table>

and css:

    .truncate {
      display: table;
      table-layout: fixed;
      width: 100%;
    }

    h1.truncated {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

here's a working Fiddle https://jsfiddle.net/d0xhz8tb/

text-overflow, The text-overflow CSS property sets how hidden overflow content is you have to set other CSS properties: overflow and white-space . To clip at the transition between characters you can specify text-overflow as an empty string, if that If there is not enough space to display the string itself, it is clipped. The CSS above then specifies that the table is to occupy 100% of the browser's window width, and each cell to take up 25% of that. If you only want your rules to be applied to a specific table, and not all tables on your page, give the table an id and set the rules to apply only to that id.

Use CSS "text-overflow" to truncate long texts, You can get a prettier result using stylesheets. The CSS property text-overflow: ellipsis has been around for quite a long time now but since Firefox Consider this HTML and Sass for a box that is not wide enough for its content: You can use text-overflow to truncate a text using CSS but it does not fit fancy requirements. All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden. .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.

Word Break, .break-normal, word-break: normal; overflow-wrap: normal Use .break-all to add line breaks whenever necessary, without trying to preserve whole words. to an element would apply the break-all utility at medium screen sizes and above. You can control which variants are generated for the word break utilities by  The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (), or display a custom string. It can be clipped, display an ellipsis (), or display a custom string.

Table Layout, Use .table-auto to allow the table to automatically size columns to fit the contents of the You can manually set the widths for some columns and the rest of the  There is a CSS property for tables that, it seems to me, is well-supported, little known, and super useful. It changes the way that tables are rendered such that it gives you a sturdier, more predictable layout. It is this: table { table-layout: fixed; }

Comments
  • +1 For characterisation of a virtual object, nicely one sir :)
  • I suspect you'll have to resort to JavaScript to solve this.
  • Lolz .. +1 for entertainment value :) ... does this need to be dynamic or can you not simply set a width on each column?
  • Ugh. Works so great, but i have no idea why, which makes me nervous :(
  • Thanks! Doesn't do exactly what the question said (truncate all columns evenly), but the behaviour of this code is what I was looking for.
  • Also, note that you can eliminate the <col>s by instead prepending the widths to the <td> styles: jsfiddle.net/7CURQ/64
  • Actually, this seems to spoil the dynamic column sizing of the non-truncated columns. They seem to always be shrunk to minimum width.
  • If your content is an very long word without spaces, this isn't working but you just need to add hyphenation to the conent in spacer with &shy; jsfiddle.net/zAeA2/160
  • this is pretty awesome! i made my own variant using attr to avoid duplicating content: jsfiddle.net/coemL8rf/2
  • @Jayen Nice - Perhaps use title instead of data-spacer to get a tooltip on mouse over :)