Text Ellipsis for table and div

by Shridhar Baddur

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table class="table table-bordered">
  <thead>
    <tr>
      <th class="col-xs-6">
        Hello
      </th>
      <th class="col-xs-1">Firstname</th>
      <th class="col-xs-1">Lastname</th>
      <th class="col-xs-1">Age</th>
      <th class="col-xs-2">City</th>
      <th class="col-xs-2">Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class=" text-table-ellipsis">
        <span>    Loremipsumdolorsitamet,consectetueradipiscingelit.Aeneancommodoligulaegetdolor.Aeneanmassa.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Donecquamfelis,ultriciesnec,pellentesqueeu,pretiumquis,sem.Nullaconsequatmassaquisenim.Donec.
        </span>
      </td>
      <td>Anna</td>
      <td>Pitt</td>
      <td>35</td>
      <td>New York</td>
      <td>USA</td>
    </tr>
  </tbody>
</table>
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="text-div-ellipsis" title="Loremipsumdolorsitamet,consectetueradipiscingelit.Aeneancommodoligulaegetdolor.Aeneanmassa.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Donecquamfelis,ultriciesnec,pellentesqueeu,pretiumquis,sem.Nullaconsequatmassaquisenim.Donec.">     Loremipsumdolorsitamet,consectetueradipiscingelit.Aeneancommodoligulaegetdolor.Aeneanmassa.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Donecquamfelis,ultriciesnec,pellentesqueeu,pretiumquis,sem.Nullaconsequatmassaquisenim.Donec.
      </div>
    </div>

  </div>
  <div class="row">
  
    <div class="col-xs-6 mem-banner-email-container">
      <div class="text-div-ellipsis">     Loremipsumdolorsitamet,consectetueradipiscingelit.Aeneancommodoligulaegetdolor.Aeneanmassa.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Donecquamfelis,ultriciesnec,pellentesqueeu,pretiumquis,sem.Nullaconsequatmassaquisenim.Donec.
      </div>
   ...

CSS

.table .text-table-ellipsis {
  position: relative;
}

.table .text-table-ellipsis span, .text-div-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}
.table .text-table-ellipsis span {
  position: absolute;
  left: 15px;
  right: 15px;
}

.text-table-ellipsis:before {
  content: '';
  display: inline-block;
}
.mem-banner-email-container {
    max-width: 250px;
}