Text abbreviation <td> does not work

Question

I would like to apply abbreviation in a <td>:

<td> TextoTextoTextoTextoTextoTexto </td>

Displaying only:

TextoTexto...

I tried to use style="text-overflow:ellipsis" but it didn’t work.

Detail: I need it to be inline, because I already have style sheet, I can not change and nor put separate style.

Answer 1

Use overflow:ellipsis; and white-space:nowrap; with the selector td {} or in the element <td style=""> It won’t work because the Tds and Ths behave differently than type elements block and inline-block, i.e., they would have to 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 in the table when using a TD or TD with the expanded layout, to solve this just use the property 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% as well 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 for the desired TD element, thus:

<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 be customized in different ways in the future and you want to take advantage of it in various elements and pages the ideal would be to create your own .css the part, outside the frameworks (as materialize), for example, creates a file called:

/projeto/css/main.css

And inside put all the customizations you want, including the tables and link in HTML so:

<!-- 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>

<link rel="stylesheet" href="css/main.css">

Answer 2

It is possible yes, maybe it is not working alone, but accompanied by the properties white-space, overflow and a width defined in container, 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>

Answer 3

I usually leave a predefined class to do this. I think is the best way to work on 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 match overflow: hidden, text-overflow: ellipsis and white-space: nowrap.