Any CSS Guru ? How to limit the height of lines in table rows?

Jean-Yves_Pochez · April 5, 2024, 12:27pm

Hi there,
I want to talk only html (and css) . will go to xojo implementation once it works in html
take this html code :

<!DOCTYPE html>
<html>
    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Table with Limited Row Height</title>
  <!-- Bootstrap CSS -->
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom CSS -->
  <style>
    .table tbody tr td {
      max-height: 100px;
		min-height: 10px;
      overflow: hidden;
		white-space: normal;
  text-overflow: ellipsis;
    }
  </style>
        
    </head>
    <body>
        <div class="container">
  <h2>Bootstrap Table with Limited Row Height</h2>
  <table class="table table-striped" style="border: 1px solid;">
    <thead>
      <tr>
        <th>#</th>
        <th>Column 1</th>
        <th>Column 2</th>
        <!-- Add more columns if needed -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td><div class="cell-content">Row 1 Data 1</div></td>
        <td><div class="cell-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo sapien, pulvinar efficitur iaculis eget, aliquam at neque. Nulla consectetur purus non mauris dictum, vitae pretium lacus accumsan. Phasellus vehicula sem nisi, in maximus elit fermentum eget. In et ligula tortor. Sed dictum diam nulla, quis iaculis lectus volutpat sed. Proin lobortis nunc sem, in condimentum purus ultrices a. Morbi consectetur feugiat orci, at placerat diam pretium vel. In finibus lacus sed leo gravida feugiat eget at lorem. Donec orci erat, mollis vel tristique a, dapibus dapibus ante. Donec est nulla, vulputate ac vehicula eget, vehicula ut libero.

</div></td>
        <!-- Add more data cells if needed -->
      </tr>
      <tr>
        <td>2</td>
        <td><div class="cell-content">Row 2 Data 1</div></td>
        <td><div class="cell-content">Row 2 Data 2</div></td>
        <!-- Add more data cells if needed -->
      </tr>
      <!-- Add more rows if needed -->
    </tbody>
  </table>
</div>

    </body>
</html>

it renders to something like :

I would like to display only some lines (3 or anything in pixels if easier) of the first row, as it is too big to display, and display some text ellipsis at the end to tell it’s partially displayed.
the tag in the header should do it, the “max-height” in particular, but I can’t make it works.
I’m pretty sure I miss something simple, but cannot figure it.

thanks .

AlbertoD · April 5, 2024, 1:08pm

You need to apply the Style to the div of the cell contents, change:

<div class="cell-content">

to

<div class="cell-content" style="max-height: 68px;overflow: hidden;">

for the cells that you need to limit the height to around 3 rows.

Ellipsis usually is only for single line text not multi-line, so it doesn’t work if I add the ellipsis to the div style.

I found this for the ellipsis but haven’t tried:

Hope this helps.

I hope someone can have more information.

Jean-Yves_Pochez · April 5, 2024, 1:28pm

changed the <style> tag to

  <style>
    .cell-content {
      max-height: 75px;
      overflow: hidden;
		white-space: normal;
  text-overflow: ellipsis;
    }
  </style>

and it gives :

which is really a good start, thanks Alberto.
next is the ellipsis at the end of the line…

Thomas_Kaltschmidt1 · April 5, 2024, 2:52pm

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;

Though this is for webkit-browsers (Chrome, Safari), it also worked in Firefox.

AlbertoD · April 5, 2024, 2:56pm

Thanks for that.

Info on webkit line clamp with compatibility:

Edit: Works (tested with Chrome, Safari, Firefox)

Jean-Yves_Pochez · April 5, 2024, 5:32pm

seems a good way to go here…
I still have a problem.
I cannot set the display style in my websdk…

var nodeCell = document.createElement('TD');
nodeCell.style.display = '-webkit-box;';
nodeCell.style.WebkitBoxOrient = 'vertical';
nodeCell.style.WebkitLineClamp = '3';
nodeCell.style.overflow = 'hidden';

and the <TD> in the browser becomes
<td scope="row" style="-webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; width: 150px; text-align: center;">30/04/2024</td>

is it because I have a display:block in the tbody just before ?
<tbody id="SJwnO7_body" style="overflow: visible scroll; display: block; height: 846px;">

AlbertoD · April 5, 2024, 5:44pm

For some reason is incomplete, missing display: -webkit-box;

Directly editing a webpage, this works:

<div class="cell-content" style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;">

(originally I used CSS block for .cell-content as you did above)

AlbertoD · April 5, 2024, 6:13pm

You have an extra ; in '-webkit-box;'
don’t know if that will fix the problem of display: -webkit-box; not showing for your Style.

Jean-Yves_Pochez · April 5, 2024, 6:56pm

the “;” extra was the reason while the display style did not get to the TD
now it’s here
<td style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; width: 381.15px; text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo sapien, pulvinar efficitur iaculis eget, aliquam at neque. Nulla consectetur purus non mauris dictum, vitae pretium lacus accumsan. In finibus lacus sed leo gravida feugiat eget at lorem. Donec orci erat, mollis vel tristique a, dapibus dapibus ante. Donec est nulla, vulputate ac vehicula eget, vehicula ut libero.</td>

but now the table is a complete mess !

AlbertoD · April 5, 2024, 7:18pm

Only with that change?
That’s strange.
I hope you can find what is going on.

Jean-Yves_Pochez · April 5, 2024, 7:34pm

I strongly suspect the “vertical” of webkitorient to be the culprit…will investigate this.

Jean-Yves_Pochez · April 6, 2024, 8:38am

complete mess but the big cell has 3 lines displayed and an ellipsis at the end …
we’re on the right track…

Jean-Yves_Pochez · April 7, 2024, 7:39am

@Thomas_Kaltschmidt1 where did you get this css ? is there an article explaining how to use it ?
I still have my whole table not looking good, althought the 3 lines and the ellipsis for the too long text are working.
do I have to have the whole table with a certain style, or only the TD is enough ?
thanks.

AlbertoD · April 7, 2024, 10:26am

The link I posted does not provide the info you want?

If you want help fixing the problem, you can share 2 sample projects without the change and with the change for review.

Did you try using in HTMLHeader:

<style>
   .cell-content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
   }
</style>

I guess that will limit all cells to 3 rows with ellipsis (do you want that limit for all cells?)

Thomas_Kaltschmidt1 · April 7, 2024, 1:13pm

I searched web but at least found this info via ChatGPT. Then tried it out in different browsers with your provided sample and it seemed to work. Do you have issues in a standalone browser or in the xojo embedded?
May it makes a difference if you style inline or via css?

Jean-Yves_Pochez · April 7, 2024, 4:07pm

thanks everyone.
the html sample works fine, but now I’m trying to install it in my websdk table
and it gives the example above…
I have some other styles on the thead, tbody (and tfooter) and I think it may come from that
so I was searching for some complete article online that explains how this css works.
…
will have to do some more experiments on it…

EDIT: it’s not the ‘vertical’ as it is mandatory to make the webkit-box work.
I tried the webkit-inline-box, it looks better but it’s still not as it should …