0

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.

shinbian11
  • 41
  • 5
  • Does this answer your question? [CSS text-overflow in a table cell?](https://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell) – kiner_shah Dec 03 '21 at 03:21

1 Answers1

0

You don't need display: block; rather just set the max-width to some fixed value say 100px.

Also, if you want to span your table to fit the full screen, then use width: 100%.

#crl-table-2 {  /* CHANGE HERE */
  width: 100%;
}

.align-left {
  text-align: left;
}

.one-line-text {
  max-width: 100px; /* CHANGE HERE */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<!DOCTYPE html>
<html>

<body>

  <table id="crl-table-2">
    <colgroup>
      <col style="width: 25%">
      <col style="width: 25%">
      <col style="width: 25%">
      <col style="width: 25%">
    </colgroup>

    <thead>
      <th class="align-left">Head1</th>
      <th class="align-left">Head2</th>
      <th>Head3</th>
      <th>Head4</th>
    </thead>
    <tbody>
      <tr>
        <td class="align-left one-line-text">Data111111111111111111111111111111111</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>

</body>

</html>
kiner_shah
  • 3,939
  • 7
  • 23
  • 37