Multi line titles

[darkred3]

Currently titles are shown in one, maybe two lines, depending on the theme. It would be nice to have an option to show the whole title all the time, even if that would take 4 or even 5 lines. There's a script called EhxVisited that lets you do that for panda which looks like this:

[nayumiDEV]

In /public/themes/, select the theme file you are using. At div.id2 a add the following value white-space: initial;
it should be able to display up to 3 lines, can't more because it can break the interface

[Difegue]

You can do this through a custom theme or a userstyle by removing white-space: nowrap and height:30px on div.id2.
It really mangles the interface though, so I won't be making this a stock feature.

I'd be open to simply removing white-space: nowrap (and slightly bumping height to 32px to match the multiples-of-4-rule) , which achieves the same effect as what @ndbiaw mentioned:

However this breaks ellipsis for text overflow, and I'm not really sure how to fix that. 🤔
(Also keep in mind the full title is always available as a tooltip on hover, as shown here)

[darkred3]

Thanks for the help, after trying out a few things I removed height: 335px; from div.id1 and

div.id2 {
  max-height: none;
  min-height: auto;
  margin: auto;
  padding-bottom: 0.25em;
  overflow: visible;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap
  width: 97%;

Which already looks pretty good, but sadly the "backgrounds" are not really lined up properly. I assume id1 needs to be edited for that, but I know next to nothing about this. Any idea how to fix it?

Btw the reason I want titles to always show is because I have a lot of non-english galleries and the language of a gallery is usually indicated at the very end so showing titles at all times really helps.

[Difegue]

Well yeah 😅, that's what I meant by

It really mangles the interface though

You can increase the height of id1 but that would also break a ton of other stuff and it's only going to snowball from there I think -- It might be fixable by switching to flexbox layout but I don't think it's worth it.

[siliconfeces]

You can use https://caniuse.com/?search=line-clamp to allow a set number of rows, while cropping overly long titles in a pretty way. Achtung, not standardized but works in every reasonable browser.

Not exactly what was requested, but may be part of a solution that doesn't fuck up the interface.

Example for two rows using modern.css:

div.id2 {
  height: 30px;
  margin: auto;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  /* white-space: nowrap; */
  width: 97%;
}

div.id2 a {
  font-weight: bold;
  text-decoration: none;
  /* New stuff below */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

[Difegue]

Thanks for this - I've updated the included themes (except Nadeko which I clamped to 1 line) to all display two lines cleanly.

If one wants unlimited lines, it's now as easy as removing -webkit-line-clamp: 2; from div.id2 a.