How to Truncate Table Cells, But Fit as Much as Content Possible

HTML table truncate text but fit as much as possible

You could try something like this:

    .td-title-area {      position: relative;    }
    .td-title-area a {      position: absolute;      left: 0;      right: 0;      top: 0;      bottom: 0;      white-space: nowrap;      overflow: hidden;      text-overflow: ellipsis;    }

<table class="table">                <col width="65%">                <col width="15%">                <col width="13%">                <col width="7%">                <thead>                    <tr>                        <th>제 목</th>                        <th>작성자</th>                        <th>작성일</th>                        <th>조회수</th>                    </tr>                </thead>                <tbody>                    <tr>                        <td class="td-title-area"> <a href="" class="td-title"> sdkjghbdslkjgbshdfjgbsdfjkhgbsdfjkghbsdgsdfhjkgbsdfkjhgbsdfkhjgbsdfkjghbsfdkjhg </a></td>                        <td> author </td>                        <td> date </td>                        <td> 11 </td>                    </tr>                  <tr>                        <td class="td-title-area"> <a href="" class="td-title"> sdkjg </a></td>                        <td> author </td>                        <td> date </td>                        <td> 11 </td>                    </tr>                  </tbody>                </table>

How to truncate text in a table column?

There is a way to achieve this without setting the width of the 'long' table cell.

Here are the ingredients:

Add border-collapse: collapse and table-layout: fixed to the table class and give a width instead of a max-width.

The border-collapse: collapse will give all cells one shared border.
The table-layout: fixed sets a fixed width.
Use width to set a fixed width instead of a max-width (can grow to...).

Next to this, add overflow: hidden to the long table cell (next to the initial additions you made), so it knows what to do if the content overflows.

In CSS:

.mytable {
    border-collapse: collapse;
    width: 400px;
    table-layout: fixed;
}

.long-td {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Demo:

td {
  border: 1px solid;
}

.mytable {
  border-collapse: collapse;
  width: 400px;
  table-layout: fixed;
}

.long-td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

max-width on the table is ignored when nowrap and text-overflow is present:
<table class="mytable">
  <tr>
    <td>short</td>
    <td class="long-td">long long long long long long long long long long long long long long long long long long long long long long long long </td>
    <td>short</td>
  </tr>
</table>

Fluid table: Truncate cell contents when needed, otherwise keep the table as narrow as possible

OK, I found a solution. Fiddle here.

Strategy:

Use a hidden table to glean the desired cell widths of the visible table.

Tactic:

In addition to the table that the user shall see, a hidden "shadow" table, with identical content, must be created directly above the visible table.

The shadow table must allow the content to wrap inside the cells (this is default table behavior).

When the page has loaded and at every window resize, show() the shadow table, measure the width of every td in the top row, then hide() the shadow table. Then copy the width values to the corresponding td elements in the visible table, which must have Chris Coyier's truncate applied.

Works in all browsers I've tested, including mobile.

Bonus tips:

Use to wrap long words if necessary, and to stop words from wrapping. This can be applied only in the shadow table.
Use 1px more cell padding in the shadow table due to a bug in Internet Explorer - otherwise, IE's visible table sometimes becomes slightly wider than the shadow table.

JavaScript (requiring jQuery):

<script type="text/javascript">

function loadEvents() {
  initFluidTables();
}

// Resize fluid table(s)
function resizeFluidTables() {

  // Show source cells
  $( ".fluid-table-invisible-source" ).show(0);

  var fluidTableCellWidth = [];

  // Measure (normally invisible) source cells
  $( ".fluid-table-invisible-source td" ).each(function( index, value ) {
    fluidTableCellWidth[index] = $( this ).width();
  });

  // Resize (always visible) target cells. Adding 1 pixel due to apparent bug in Firefox.
  $( ".fluid-table-visible-target td>i" ).each(function( index, value ) {
    $( this ).css({'width': fluidTableCellWidth[index]+1 });
  });

  // Re-hide source cells
  $( ".fluid-table-invisible-source" ).hide();

}

// Create table(s) to be fluid
function initFluidTables() {

  // Create a container. Not really necessary, but keeps DOM tidier.
  $(".fluid-table").wrap( "<div></div>" );

  // This looks like a mess. What it does, is that .fluid-table duplicates itself, and each sibling gets a different class.
  $(".fluid-table").each(function() {
    $( this ).clone().appendTo( $( this ).addClass( "fluid-table-invisible-source" ).parent() ).addClass( "fluid-table-visible-target" );
  });

  // Add truncating element inside target cells
  $(".fluid-table-visible-target td").wrapInner( "<i></i>");

  // Truncate table contents at first drawing of the DOM and every time the window resizes
  resizeFluidTables();
  $( window ).resize(function() {
    resizeFluidTables();
  });
}
</script>

CSS:

.fluid-table td { padding-right: 5px; }

.fluid-table td:nth-child(odd) { color: #aaa; }

.fluid-table-visible-target td>i {
  font-style: inherit;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* source slighly more padded than target due to IE bug */

.fluid-table-invisible-source td:nth-child(even) {
  padding-right: 10px;
}

.fluid-table-visible-target td:nth-child(even) {
  padding-right: 9px;
}

Sample table:

Note use of and to indicate where you (do not) want the text to truncate.

<table class="fluid-table">
  <tr>
    <td>Available <i>until</i>:</td><td>No expiry date</td><td>Availability:</td><td>Worldwide</td><td></td>
  </tr><tr>
    <td>Year:</td><td>2016</td><td>Length:</td><td>29 minutes</td><td></td>
  </tr><tr>
    <td>First broadcast:</td><td>Feb 2</td><td>Last broadcast:</td><td>Feb 3</td><td></td>
  </tr>
</table>

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

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>

Truncate long text in each table cell, but show full text in each cell in a row on hover

You don't need jQuery or even JavaScript, just move your :hover pseudo class to the tr like so:

tr:hover .test {
    /* These styles will be applied to all 'test's inside a 'tr' that's hovered. */
}

And of course here's a snippet showing it in action:

.test {  width: 100px;  text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap;}
tr:hover .test {  overflow: visible;   white-space: normal;}

<table>  <tr>    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>  </tr>  <tr>    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>    <td><p class="test">This is text that doesn't fit inside, but is visible on hover.</p></td>  </tr></table>

How can I truncate long texts in a table using CSS?

Use text-overflow: ellipsis. You will need to fix the width of the cells and prevent line wrapping:

td {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

EDIT: actually this won't work. It seems you need a container div to apply the styles to:

<table>
  <tr>
    <td><div>How to Truncate Table Cells, But Fit as Much as Content PossibleHow to Truncate Table Cells, But Fit as Much as Content PossibleHow to Truncate Table Cells, But Fit as Much as Content PossibleHow to Truncate Table Cells, But Fit as Much as Content Possiblea</div</td>
(snip)

And then:

 td div {
   width: 100px;
   white-space: nowrap;
   overflow: hidden;         
   text-overflow: ellipsis;
 }

EDIT 2 Ah there is a way, but only if you use table-layout: fixed:

table {
  table-layout: fixed;
  width: 100px;
}

td {
  white-space: nowrap;
  overflow: hidden;         /* <- this does seem to be required */
  text-overflow: ellipsis;
}

Not able to truncate text with 100% of width

Try putting the truncation styles on the element containing the text:

#resource-container {
    margin-top: 10px;
    width: 100%;
}

#resource-container td div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

Edit: Per feedback, now added additional styles needed for this to work in a table.

#resource-container {  margin-top: 10px;  width: 100%;}#resource-container td:nth-child(2) {  width: 100%;  max-width: 1px;}#resource-container td:nth-child(2) div {    white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-sm-2 hideable-sidebar" id="resource_container">  <h4>Resource</h4>
  <div class="input-group">    <input type="text" placeholder="search" class="form-control">    <span class="input-group-btn">                    <button class="clear btn btn-default" type="button">                        <span class="glyphicon glyphicon-remove"></span>    </button>    </span>  </div>
  <table border='1' id='resource-container'>    <tr id="res-1">      <td style="background-color:#FFCCC2" class="resource-color">  </td>      <td style="padding-left: 10px">        <div><strong>foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</strong>          <br>test</div>      </td>    </tr>    <tr id="res-1">      <td style="background-color:#F41FF2" class="resource-color">  </td>      <td style="padding-left: 10px">        <div><strong>foo</strong>          <br>tHTML table truncate text but fit as much as possible How to truncate text in a table column? Fluid table: Truncate cell contents when needed, otherwise keep the table aHTML table truncate text but fit as much as possible How to truncate text in a table column? Fluid table: Truncate cell contents when needed, otherwise keep the table aHTML table truncate text but fit as much as possible How to truncate text in a table column? Fluid table: Truncate cell contents when needed, otherwise keep the table aHTML table truncate text but fit as much as possible How to truncate text in a table column? Fluid table: Truncate cell contents when needed, otherwise keep the table aHTML table truncate text but fit as much as possible How to truncate text in a table column? Fluid table: Truncate cell contents when needed, otherwise keep the table aHTML table truncate text but fit as much as possible How to truncate text in a table column? Fluid table: Truncate cell contents when needed, otherwise keep the table aHTML table truncate text but fit as much as possible How to truncate text in a table column? Fluid table: Truncate cell contents when needed, otherwise keep the table aHTML table truncate text but fit as much as possible How to truncate text in a table column? Fluid table: Truncate cell contents when needed, otherwise keep the table aHTML table truncate text but fit as much as possible How to truncate text in a table column? Fluid table: Truncate cell contents when needed, otherwise keep the table aHTML table truncate text but fit as much as possible How to truncate text in a table column? Fluid table: Truncate cell contents when needed, otherwise keep the table ast</div>      </td>    </tr>    <tr id="res-1">      <td style="background-color:#F4CCC2" class="resource-color">  </td>      <td style="padding-left: 10px">        <div><strong>foo</strong>          <br>test</div>      </td>    </tr>  </table></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>