title: Truncate overflow text in table cell, so table does not go wider than screen
body: <p>I am trying to display various items in tabular format (each entry has various attributes). The following is also required:</p>
  
  <ol>
  <li>Columns should be dynamic so as to closely fit content, no fixed widths (handled by table layouts)</li>
  <li>Rows should be clickable to activate an action on that row's entry, e.g. show new page with expanded version of that content (handled by using CSS <code>display: table/table-row/table-cell</code> instead of <code>&lt;table&gt;/&lt;tr&gt;/&lt;td&gt;</code> - as per example code). (Another reason for me is that I use JSF, which generates HTML, but sort of leaves me stuck with with using this.)</li>
  <li><strong>I am unable to get this right</strong>: The table should not grow outside the screen width if possible. In particular, a "summary" column displays (potentially long) text, which is to be truncated when necessary, so text fits into the cell, which is adapted to the table width, which may not be wider than screen width.
  
  <ul>
  <li>I use the CSS <code>text-overflow: ellipsis</code> on this summary, together with other needed settings. Because the surrounding <code>&lt;div&gt;</code> already has <code>display: table-cell</code>, while the <code>ellipsis</code> attribute <a href="https://developer.mozilla.org/en/docs/Web/CSS/text-overflow" rel="nofollow noreferrer">needs an inline/block element</a>, the "summary" text is wrapped in another <code>&lt;div&gt;</code>.</li>
  </ul></li>
  </ol>
  
  <p>Here is an example of the <strong>desired</strong> effect (note NO scrollbar at bottom):
  <a href="https://i.stack.imgur.com/bclzm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bclzm.png" alt="enter image description here"></a></p>
  
  <p>While this is what I am currently able to achieve (<strong><em>NOT ideal</em></strong>) (note scrollbar at bottom - which indicates table runs off window on right):
  <a href="https://i.stack.imgur.com/O05fh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O05fh.png" alt="enter image description here"></a></p>
  
  <p>Here is barebones code to achieve this (one could omit all attributes marked with <code>/*l&amp;f*/</code> (look and feel), they are only meant to generate a cleaner-looking, easier to debug example).</p>
  
  <p><strong>CSS and HTML:</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>A {
    /*l&amp;f*/text-decoration: inherit;
    /*l&amp;f*/color: inherit;
  }
  .list-table {
    display: table;
    /*l&amp;f*/border: 1px solid blue;
    /*l&amp;f*/border-spacing: 5px;
  }
  .list-tr {
    display: table-row;
    /*l&amp;f*/background-color: lightgray;
  }
  .list-td {
    display: table-cell;
    white-space: nowrap; /* one line */
    /*l&amp;f*/padding: 2px; border : 1px solid green;
    /*l&amp;f*/border: 1px solid red;
  }
  .summary {
    display: block;
    white-space: nowrap; /* one line */
    overflow: hidden; /* make text overflow */
    text-overflow: ellipsis; /* truncate tex with ... */
    /*l&amp;f*/background-color: lightblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="list-table"&gt;
    &lt;a href="#1" class="list-tr"&gt;
      &lt;div class="list-td"&gt;Row 1&lt;/div&gt;
      &lt;div class="list-td"&gt;More stuff&lt;/div&gt;
      &lt;div class="list-td"&gt;
        &lt;div class="summary"&gt;Some single line run on text goes here&lt;/div&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  
    &lt;a href="#2" class="list-tr"&gt;
      &lt;div class="list-td"&gt;Row 2&lt;/div&gt;
      &lt;div class="list-td"&gt;Other column&lt;/div&gt;
      &lt;div class="list-td"&gt;
        &lt;div class="summary"&gt;This is text content that runs on and on
          and on without end and may need to be truncated somewhere on the
          summary screen depending on screen size to show only the first part
          that will fit.&lt;/div&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  
    &lt;a href="#3" class="list-tr"&gt;
      &lt;div class="list-td"&gt;Row 3&lt;/div&gt;
      &lt;div class="list-td"&gt;Still other content&lt;/div&gt;
      &lt;div class="list-td"&gt;
        &lt;div class="summary"&gt;Here is still more long text that may
          need truncation in the summary version because it is so long.&lt;/div&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have been able to achieve the desired result with <code>display: -moz-box</code> (and various other <code>-moz-</code> settings), in the <code>summary</code> style. Not happy because this is not cross-platform.</p>
  
  <p>Do you have any better suggestions? Your help is much appreciated :-)</p>