if it is not achievable via CSS this seems reasonable

I think this is probably what we want, and looks like FireFox added support in 2019 so probably okay to use nowadays:

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp#truncating_a_paragraph

It's a bigger PR but in principle then people can just override the number of lines, box width, etc. to their liking rather than us having some artificial character limit.

@lucyleeow do you agree it's a better way forward? If so then @fgmacedo would you be up for trying this?

if it is not achievable via CSS this seems reasonable

I think this is probably what we want, and looks like FireFox added support in 2019 so probably okay to use nowadays:

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp#truncating_a_paragraph

It's a bigger PR but in principle then people can just override the number of lines, box width, etc. to their liking rather than us having some artificial character limit.

@lucyleeow do you agree it's a better way forward? If so then @fgmacedo would you be up for trying this?

I'm already aware of this. But I cannot get to make it work for any situation.

1. Set the display property to -webkit-box, a necessary step as -webkit-line-clamp only works with -webkit-box.
2. Set the -webkit-box-orient property to vertical: This defines the box’s orientation to vertical, so that the lines are vertically stacked.
3. For example, I'm trying to clamp at 2 lines to see if it works: -webkit-line-clamp: 2;

The final CSS was:

.sphx-glr-thumbcontainer[tooltip]:hover:after {
  background: var(--sg-tooltip-background);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  color: var(--sg-tooltip-foreground);
  content: attr(tooltip);
  padding: 10px;
  z-index: 98;
  width: 100%;
  height: 100%;
  position: absolute;
  pointer-events: none;
  top: 0;
  box-sizing: border-box;
  overflow: hidden;
  backdrop-filter: blur(3px);

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* Number of lines to show */
  overflow: hidden;       
}

My result was (note the ellipsis on the second line):

It added the ellipsis, but no text was truncated.

So you need to get in sync how many lines of text can be displayed with the font, margin, size, etc... to get the exactly configuration on the clamp, because it doesn't get rid of the next line... if the container is larger / smaller, things are going to break. This is why I called the solution "fragile".

height and padding are going to play a role here. Probably for the CSS approach to work and still look good, the semitransparent overlay will need to be a separate node from the tooltip text container. By hacking in the browser console like this:

I can get this:

@lucyleeow do you agree it's a better way forward?

100% prefer CSS option. We don't want another config.

Changing the approach:

1. Introduction tooltip corresponds to the first paragraph and is no longer truncated.
2. Tooltip representation is handled using CSS.

Do you agree with this?

Yes that sounds good!

Looks like there is a tiny visual regression in this PR where the mouseover "black box" doesn't cover the whole tile, for example mousing over I see

Whereas on latest dev I see:

Not sure if it's fixable or not...? One solution would be to make one div with height=100% that covers the whole tile, and then inside that the next div (or whatever) that does the text trucncation.

One solution would be to make one div with height=100% that covers the whole tile, and then inside that the next div (or whatever) that does the text trucncation.

That's exactly what I was trying to suggest above when I said

the semitransparent overlay will need to be a separate node from the tooltip text container

But @larsoner has said it much more clearly :)

Tests passing locally. Is sphinx_gallery/tests/test_full.py::test_interactive_example_logo_exists an intermittent test?

real but unrelated to this PR. Its present in #1346 as well.

I've currently set the default to 4 lines, but I might have been a bit conservative. How about increasing it to 6 lines?

Preview:

https://output.circle-artifacts.com/output/job/1d60ae2a-9e1f-421d-bcf5-3d55c8cb487e/artifacts/0/html/auto_examples/index.html

Also, I've missed the pointer-events: none;, including.

Failure in sphinx dev was due to sphinx-doc/sphinx#12425 and I pushed a commit to #1346. Once that lands I'll merge master into this PR which should get things green, and I'll look at the examples. Agreed 6 is probably better than 4 for line clamping

Rendered doc looks good and locally I tested it on MNE-Python and things looked good so in it goes, thanks @fgmacedo !