title: Bootstrap 4 text-truncate not working in a table cell
body: <p>There are several questions on SE about this issue in Bootstrap 3, which have been solved by adding a custom class. Bootstrap 4 includes a <a href="https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow" rel="noreferrer">text-truncate class</a> to limit the display of text inside an element. We've used it in parts of the site without issue. </p>
  
  <p>However, it doesn't work when applied to a table cell. Here's what we tried - in reality, there are multiple columns to the table but I've trimmed it down to one.</p>
  
  <pre><code>&lt;table class="table table-striped table-bordered table-hover table-hover-cursor" id="tblData"&gt;
  &lt;thead class="thead-light"&gt;
  &lt;tr&gt;
    &lt;th scope="col" data-bind="tableSort: { arr: _data, propName: 'text()'}"&gt;Text&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody data-bind="foreach: pagedData"&gt;
      &lt;tr&gt;
          &lt;td data-bind="text: text()" class="text-truncate"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>There are various other question about this which suggest you need to put the text inside a span to have it work. But this doesn't work either.</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;
        &lt;span data-bind="text: text()" class="text-truncate"&gt;&lt;/span&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I've also tried moving the class to the td and having it on both the td and the span. None of it works.</p>
  
  <p>Another common suggestion is to add the text class. Although that doesn't seem to be a default class in Bootstrap. This doesn't work either.</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td&gt;
        &lt;span data-bind="text: text()" class="text text-truncate"&gt;&lt;/span&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Again, moving or duplicating the class on the td doesn't make any difference. I wasn't sure if a size limitation might be needed so I tried this:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td data-bind="text: text()" class="col-md-2 text-truncate"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>But still the text is displayed in full with no elipsis.</p>
  
  <p>In all cases I've check the element to make sure it's picking up the text-truncate class and that the styles are being applied, and they are.</p>
  
  <p>This does work:</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td data-bind="text: text()" class="text-truncate" style="max-width: 200px"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>But I'd prefer to stick to Bootstrap classes. What's the correct set of elements and classes to get this to work?</p>