Text abbreviation td does not work

Using overflow:ellipsis; and white-space:nowrap; with the td {} selector or the <td style=""> element will not work because the TDs and THs behave differently than elements of type block and inline-block , meaning they would have that have their widths fixed for it to work, otherwise the table will expand beyond the size fixed in table, for example:

.foo {
  width: 400px;
}
.foo thead {
    font-weight: bold;
}
.foo td, .foo th {
    border: 1px #e0e0e0 solid;
}

.text-limit {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

<table class="foo">
    <thead>
        <tr>
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
            <th>head4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-limit">foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz</td>
            <td>cell2_1</td>
            <td>cell3_1</td>
            <td>cell4_1</td>
        </tr>
        <tr>
            <td>cell1_1</td>
            <td>cell2_1</td>
            <td>cell3_1</td>
            <td>cell4_1</td>
        </tr>
    </tbody>
</table>

Note that even setting the size to 400px on the tabel when you use a TD or TD with the layout expanded, to solve this, just use the table-layout: fixed; :

.foo {
  width: 400px;
  table-layout: fixed;
}
.foo thead {
    font-weight: bold;
}
.foo td, .foo th {
    border: 1px #e0e0e0 solid;
}

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

<table class="foo">
    <thead>
        <tr>
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
            <th>head4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-limit">foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz</td>
            <td>cell2_1</td>
            <td>cell3_1</td>
            <td>cell4_1</td>
        </tr>
        <tr>
            <td>cell1_1</td>
            <td>cell2_1</td>
            <td>cell3_1</td>
            <td>cell4_1</td>
        </tr>
    </tbody>
</table>

Note that the table can use 100% too and the effect still works:

.foo {
  width: 100%;
  table-layout: fixed;
}
.foo thead {
    font-weight: bold;
}
.foo td, .foo th {
    border: 1px #e0e0e0 solid;
}

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

<table class="foo">
    <thead>
        <tr>
            <th>head1</th>
            <th>head2</th>
            <th>head3</th>
            <th>head4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-limit">foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz</td>
            <td>cell2_1</td>
            <td>cell3_1</td>
            <td>cell4_1</td>
        </tr>
        <tr>
            <td>cell1_1</td>
            <td>cell2_1</td>
            <td>cell3_1</td>
            <td>cell4_1</td>
        </tr>
    </tbody>
</table>

Using inline form

Just copy the example from .text-limit to the desired TD element, like this:

<table style="table-layout: fixed;">

...

<tr>
    <td style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz foo bar baz</td>
    <td>cell2_1</td>
    <td>cell3_1</td>
    <td>cell4_1</td>
</tr>

...

However if you want to apply to all elements and you have control over HTML you could simply add a style element like this:

<style>
.minhatabela {
  width: 100%;
}

.minhatabela th, .minhatabela td {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>

And in HTML just add this:

<table class="minhatabela">

Or if you believe that your CSS will eventually be customized in different ways and you want to take advantage of it in many elements and pages, it would be ideal to create your own .css aside from the frameworks (such as materialize) creates a file called:

/projeto/css/main.css

And inside it put all the customizations you want, including those of the tables and link it in HTML like this:

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script><linkrel="stylesheet" href="css/main.css">

It is possible, yes, it may not work by itself, but with the properties white-space , overflow and a width defined in the container, it works ...

<h2>text-overflow: ellipsis:</h2>
<div class="b" style="

  text-overflow: ellipsis;
  white-space: nowrap; 
  width: 50px; 
  overflow: hidden; 
  border: 1px solid #000000;

">Hello world!</div>

Generally, I leave a predefined class to do this. I think a is the best way to work in CSS

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

<div class="text-limit" style="width:50px">
   Meu nome é Wallace
</div>

<div class="text-limit" style="width:75px">
   Meu nome é Wallace
</div>


<div class="text-limit" style="width:100px">
   Meu nome é Wallace
</div>

<div class="text-limit" style="width:130px">
   Meu nome é Wallace
</div>

By default, I always combine overflow: hidden , text-overflow: ellipsis and white-space: nowrap .