How to display with text abbreviation '...' when over a certain length with CSS? (when the length is not fixed)

I know how to display the text abbreviation '...' when it is over a certain length (when fixed in px, not %) with CSS.

  display:block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px; //width with fixed length (px..etc)

=> This works fine, but I wonder what to do if the width is set in % units, in case the width is not px but depends on the size of the browser window. By adding a flexible and responsive nature, I would like to create a table that can respond well to arbitrarily increasing or decreasing the size of the window.

<table id="crl-table-2">
                    <col style="width : 25%" >
                    <col style="width : 25%" >
                    <col style="width : 25%" >
                    <col style="width : 25%" >
                    
                    <thead>
                        <th class="align-left">Head1</th>
                        <th class="align-left">Head2</th>
                        <th>Head3</th>
                        <th>Head4</th>
                    </thead>
                    <tbody>
                        <tr style="display : block;">
                            <td class="align-left one-line-text">Data1</td>
                            <td class="align-left one-line-text">Data2</td>
                            <td class="one-line-text">Data3</td>
                            <td class="one-line-text">Data4</td>
                        </tr>
                    </tbody>
</table>

The html structure to which I want to apply this function is as above. class align-left is

{ text-align: left; }

class one-line-text is

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

This is it. If display: block is put in the one-line-text class, each td becomes a block, and one was not displayed on one line, so I deleted it from the one-line-text class css . I'm also curious where the display: block should be applied.