Make "text overflow: ellipsis" work inside the table cell * without setting * table-layout: fixed "

Question

There are several questions about how to get text-overflow: ellipsiswork inside a table cell. And the solution is basically customization table-layout: fixed.

Why can't I do this? Well, because I have a dynamic cell width.

http://jsfiddle.net/d7h437he/2/

The key of the button should "match the contents", and the copy cell should take everything else. This type of layout is not possible with table-layout: fixed, because the button cell must have a specified width, which I cannot dynamically from it.

How to truncate a copy cell?

Note: "impossible" is a valid answer and will be accepted. :)

Answer 1

The problem is that when you are not using table-layout: fixed, the cells are at least as wide as the minimum width required by the content. Therefore, the text cannot overflow the cell; it is a table that overflows the container.

However, there is a workaround. You can wrap the contents of the cell inside the inner container with

width: 0;
min-width: 100%;

The first will prevent the cell from growing as wide as the text, and the second will make the inner container fill the entire cell.

.container {
  width: 520px;
  background: yellow;
  padding: 6px;
  margin-bottom: 10px;
}
.table {
  display: table;
  width: 100%;
}
.table > * {
  display: table-cell;
}
.copy {
  width: 100%; 
}
.copy > div {
  width: 0;
  min-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.button {
  white-space: nowrap;
}

<div class="container">
  <div class="table">
    <div class="copy"><div>Lorem ipsum</div></div>
    <div class="button">Save</div>
  </div>
</div>
<div class="container">
  <div class="table">
    <div class="copy"><div>Lorem ipsum</div></div>
    <div class="button">Update and save</div>
  </div>
</div>
<div class="container">
  <div class="table">
    <div class="copy"><div>Lorem ipsum</div></div>
    <div class="button">Cancel</div>
  </div>
</div>
<div class="container">
  <div class="table">
    <div class="copy"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus eius fugit non dolorum ipsam fuga laborum consectetur minus atque nisi nobis voluptatum aut doloremque tenetur maiores officiis quibusdam vitae voluptate.</div></div>
    <div class="button">Cancel</div>
  </div>
</div>

Run codeHide result

Answer 2

This is without using table cells. Maybe you should consider using.

.container {
  width: 520px;
  background: yellow;
  padding: 6px;
  margin-bottom: 10px;
}
.button {
  white-space: nowrap;
  float: right;
  margin-left: 30px;
}
.copy {
  overflow: hidden; 
}
.copy .wid100{
  width: 100%;
  overflow: hidden;  
  white-space: nowrap; 
  text-overflow: ellipsis;
}
.clear{
  clear: both;
}

<div class="container">
    <div class="table">
      <div class="button">Cancel</div>
      <div class="copy">
          <div class="wid100">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus eius fugit non dolorum ipsam fuga laborum consectetur minus atque nisi nobis voluptatum aut doloremque tenetur maiores officiis quibusdam vitae voluptate.
          </div>
      </div>
      <div class="clear"></div>
    </div>
</div>

Answer 3

jQuery.

HTML:

<div class="table">
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="right">Lorem Ipsum</div>
</div>

CSS , max-width: 0 ( table):

.table {
    display: table;
    width: 100%;
}

.left, .right {
    display: table-cell;
    padding: 0 5px 0 5px;

    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

, div, 50% div, - . , , ,, , , . .

// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

$('.right').on('input', function() {
    var $width = $(this).textWidth(); // Get width of text
    $width += 10; // Add left and right padding
    $(this).width($width); // Set width
}).trigger('input');

, , padding; . fiddle.

To use this in a multi-row table, you can change the jQuery iteration over the cells in the column and set the column width to the desired width of the widest cell in the column. Or, if you know which one is the widest (as you think, from your violin), you can just direct jQuery to get the width of it.