Reduce the overflow text in the table cell so that the table will not be wider than the screen

Question

I am trying to display different elements in a table format (each record has different attributes). The following is also required:

• Columns must be dynamic to exactly match the content, without a fixed width (processed by tabular layouts).
• Lines must be interactive in order to activate an action on that line, for example. show a new page with an expanded version of this content (processed using CSS display: table/table-row/table-cell instead of <table>/<tr>/<td> - according to the sample code). (Another reason for me is that I use JSF, which generates HTML, but seems to leave me with this.)
• I cannot get this right : the table should not grow beyond the width of the screen, if possible. In particular, the summary column displays (potentially long) text that should be truncated when necessary, so the text is inserted into a cell that is adapted to the width of the table, which can be no wider than the width of the screen.
  • I use CSS text-overflow: ellipsis in this summary along with other necessary settings. Since the surrounding <div> already has display: table-cell , and the ellipsis attribute needs an inline / block element , the "summary" text is verified in another <div> .

Here is an example of the effect you want (note the bottom scroll bar):

So far, this is what I can currently achieve ( NOT perfect ) (note the scroll bar at the bottom - which indicates that the table launches the window on the right):

To do this, you will get the barebones code (you can omit all the attributes marked with /*l&f*/ (appearance and perception), they are only intended to create a cleaner, easier debugging 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 managed to achieve the desired result using display: -moz-box (and various other settings -moz- ) in the style of summary . I do not like it, because it is not a cross-platform platform.

Do you have the best deals? Your help is much appreciated :-)

Answer 1

If you can make changes to the exported HTML, then you have a possible solution.

I made a few changes to your HTML (parent div added in .summary to create a fixed table 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> 

Answer 2

 .list-table { max-width:100vw; } 

Answer 3

All I could do was add (arbitrary) max-width to the summary class:

 .summary { display: block; white-space: nowrap; /* one line */ overflow: hidden; /* make text overflow */ text-overflow: ellipsis; /* truncate tex with ... */ /*l&f*/background-color: lightblue; max-width: 500px; } 

You need to give .summary some non-inherited width to get text-overflow working, I think ...