.is-truncated utility

by jorgeluis

HTML

<div id="t1">
<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>description</th>
            <th>phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>alpha</td>
            <td class="is-truncated">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>555-555-5555</td>
        </tr>
        <tr>
            <td>2</td>
            <td>beta</td>
            <td class="is-truncated">Sed et nulla neque.</td>
            <td>555-555-5555</td>
        </tr>
        <tr>
            <td>3</td>
            <td>gamma</td>
            <td class="is-truncated">Morbi imperdiet neque ut lorem rhoncus fermentum.</td>
            <td>555-555-5555</td>
        </tr>
    </tbody>
</table>
</div>

CSS

/* truncate all cells */
.table.has-truncated-cells { 
  width: 100%;
  table-layout: fixed;
  white-space: nowrap;
  td {
    overflow: hidden;
    text-overflow: ellipsis;
    &.is-clipped {
      // button cells shouldn't ellipsis
      text-overflow: clip;
    }
  }
}

/* normal table, truncate only a specific cell */
td.is-truncated {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 1px;
}