Truncate overflow text in table cell, so table does not go wider than screen

Question

I am trying to display various items in tabular format (each entry has various attributes). The following is also required:

1. Columns should be dynamic so as to closely fit content, no fixed widths (handled by table layouts)
2. 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 display: table/table-row/table-cell instead of <table>/<tr>/<td> - 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.)
3. I am unable to get this right: 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.
   • I use the CSS text-overflow: ellipsis on this summary, together with other needed settings. Because the surrounding <div> already has display: table-cell, while the ellipsis attribute needs an inline/block element, the "summary" text is wrapped in another <div>.

Here is an example of the desired effect (note NO scrollbar at bottom):

While this is what I am currently able to achieve (NOT ideal) (note scrollbar at bottom - which indicates table runs off window on right):

Here is barebones code to achieve this (one could omit all attributes marked with /*l&f*/ (look and feel), they are only meant to generate a cleaner-looking, easier to debug example).

CSS and HTML:

A {
  /*l&f*/text-decoration: inherit;
  /*l&f*/color: inherit;
}
.list-table {
  display: table;
  /*l&f*/border: 1px solid blue;
  /*l&f*/border-spacing: 5px;
}
.list-tr {
  display: table-row;
  /*l&f*/background-color: lightgray;
}
.list-td {
  display: table-cell;
  white-space: nowrap; /* one line */
  /*l&f*/padding: 2px; border : 1px solid green;
  /*l&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&f*/background-color: lightblue;
}

<div class="list-table">
  <a href="#1" class="list-tr">
    <div class="list-td">Row 1</div>
    <div class="list-td">More stuff</div>
    <div class="list-td">
      <div class="summary">Some single line run on text goes here</div>
    </div>
  </a>

  <a href="#2" class="list-tr">
    <div class="list-td">Row 2</div>
    <div class="list-td">Other column</div>
    <div class="list-td">
      <div class="summary">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.</div>
    </div>
  </a>

  <a href="#3" class="list-tr">
    <div class="list-td">Row 3</div>
    <div class="list-td">Still other content</div>
    <div class="list-td">
      <div class="summary">Here is still more long text that may
        need truncation in the summary version because it is so long.</div>
    </div>
  </a>
</div>

I have been able to achieve the desired result with display: -moz-box (and various other -moz- settings), in the summary style. Not happy because this is not cross-platform.

Do you have any better suggestions? Your help is much appreciated :-)

Answer 1

If you can make changes to your exported HTML then you have here a possible solution.

I made a few changes to your HTML (added a parent div to .summary, to create a fixed table by using table-layout:fixed)

See SNIPPET below:

A {
  /*l&f*/
  text-decoration: inherit;
  /*l&f*/
  color: inherit;
}
.list-table {
  display: table;
  /*l&f*/
  border: 1px solid blue;
  /*l&f*/
  border-spacing: 5px;
  width: 100%; /* ADDED */
}
/* CREATED */
.fixed-table {
  width:100%;
  table-layout: fixed;
  display:table
}

.list-tr {
  display: table-row;
  /*l&f*/
  background-color: lightgray;
}
.list-td {
  display: table-cell; /* CHANGED */
  white-space: nowrap;
  /* one line */
  /*l&f*/
  padding: 2px;
  border: 1px solid green;
  /*l&f*/
  border: 1px solid red;
}
.summary {
  display: table-cell;
  /*l&f*/
  background-color: lightblue;
  white-space: nowrap;
  /* one line */
  overflow: hidden;
  /* make text overflow */
  text-overflow: ellipsis;
  /* truncate texT with ... */
}

<div class="list-table">
  <a href="#1" class="list-tr">
    <div class="list-td">Row 1</div>
    <div class="list-td">More stuff</div>
    <div class="list-td">
      <div class="fixed-table">
        <div class="summary">Some single line run on text goes here</div>
      </div>
    </div>
  </a>

  <a href="#2" class="list-tr">
    <div class="list-td">Row 2</div>
    <div class="list-td">Other column</div>
    <div class="list-td">
      <div class="fixed-table">
        <div class="summary">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.</div>
      </div>
    </div>
  </a>

  <a href="#3" class="list-tr">
    <div class="list-td">Row 3</div>
    <div class="list-td">Still other content</div>
    <div class="list-td">
      <div class="fixed-table">
        <div class="summary">Here is still more long text that may need truncation in the summary version because it is so long.</div>
      </div>
    </div>
  </a>
</div>