Dynamic Ellipsis

HTML

<table>
    <thead>
        <tr>
            <th>one</th>
            <th>two</th>
            <th>three</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span>asldf lkasjdflasdkj laksdjflasdkjjf asdfasd asdf asd</span>
            </td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

CSS

th, td {
    width: 33%;
    border: 1px solid black;
    max-width:200px;
}
table {
    width: 100%;
}
span {
  font-family: 'Untitled Sans';
      font-size: 14px; 
      color: #ffffff;
      margin-left: 15px;
      display: inline-block;
      height: 40px;
      line-height: 3;


    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}